vue组件传值的示例分析

这篇文章主要为大家展示了“vue组件传值的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue组件传值的示例分析”这篇文章吧。

前言

vue中的组件传值大家应该都不陌生，今天用两个简单易懂的小案例教大家在项目中如何使用父传子、子传父组件之间的数据传递。

实现思路

• 父传子： 在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值，在子组件通过 props:['自定义属性名'] 来接收数据。

• 子传父： 在子组件中自定义一个事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

实例1：父传子

本篇小实例主要是模拟父组件向不同子组件传递不同数据的情况。

父组件 index.vue

<template>  <!-- 父组件 -->  <div>    <Child :message="informtion" v-if="typeCode == '0'"></Child>    <Electronic :message="dataList" v-if="typeCode == '1'"></Electronic>  </div></template><script>// 引入子组件import Child from "./subassembly/seed.vue";import Electronic from "./subassembly/sons.vue";export default {  data() {    return {      typeCode: "0",//通过"0" "1"判断显示哪个页面；0：子组件1页面；1：子组件2页面      informtion:"我是传递给子组件1的数据",//要传递给子组件1的数据      dataList:"我是传递给子组件2的数据",//要传递给子组件2的数据    };  },  //一定要注册组件  components: {       Child,    Electronic,  },};</script>

子组件1 seed.vue

<template>  <!-- 子组件1 -->  <h3>我是子组件1<br />接收父组件值：{{ informtion }}</h3></template><script>export default {  data() {    return {      informtion: "",//用于赋值    };  },  props: {    // message用于接收    message: {      type: String, //验证类型，也可以验证其他类型      default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值    },  },  mounted() {    console.log(this.message); //父组件传递过来的数据    // 赋值操作    let str = this.message;    this.informtion = str;  },};</script>

子组件2 sons.vue

<template>  <!-- 子组件2 -->  <h3>我是子组件2<br />接收父组件值：{{ dataList }}</h3></template><script>export default {  data() {    return {      dataList: "",//用于赋值    };  },  props: {    // message用于接收    message: {      type: String, //验证类型，也可以验证其他类型      default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值    },  },  mounted() {    console.log(this.message); //父组件传递过来的数据    // 赋值操作    let str = this.message;    this.dataList = str;  },};</script>

实现效果

1. 当 typeCode 为 “0” 时，页面内容如下：

2. 当 typeCode 为 “1” 时，页面内容如下：

实例2：子传父

本篇小实例主要是模拟不同子组件向父组件传递数据的情况。

seed.vue 子组件1

<template>  <!-- 子组件1 -->  <button @click="seedOnclick">我是子组件1</button></template><script>export default {  data() {    return {      seedCode: "Romantic never die!", //子传父要传递的值    };  },  methods: {    seedOnclick() {      this.$emit("seed", this.seedCode); //参数1：自定义事件；参数2：要传递的值    },  },};</script>

sons.vue 子组件2

<template>  <!-- 子组件2 -->  <button @click="sonsOnclick">我是子组件2</button></template><script>export default {  data() {    return {      dataListCode: "world peace!", //子传父要传递的值    };  },  methods: {    sonsOnclick() {      this.$emit("sons", this.dataListCode); //参数1：自定义事件；参数2：要传递的值    },  },};</script>

index.vue 父组件

<template>  <!-- 父组件 -->  <div>    <Child @seed="seedAccept" v-if="typeCode == '0'"></Child>    <Electronic @sons="sonsAccept" v-if="typeCode == '1'"></Electronic>  </div></template><script>// 引入子组件import Child from "./subassembly/seed.vue";import Electronic from "./subassembly/sons.vue";export default {  data() {    return {      typeCode: "0", //通过"0" "1"判断显示哪个页面；0：子组件1页面；1：子组件2页面    };  },  //一定要注册组件  components: {    Child,    Electronic,  },  methods: {    seedAccept(data) {      console.log(data, "子组件1传给父组件的值");    },    sonsAccept(data) {      console.log(data, "子组件2传给父组件的值");    },  },};</script>

实现效果

1. 当 typeCode 为 “0” 时，页面内容如下：

2. 当 typeCode 为 “1” 时，页面内容如下：

以上是“vue组件传值的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！