vue单页开发父子组件传值思路详解

2019-11-19 13:49:01

字体：大中小

来源：转载

供稿：网友

vue单页开发时经常需要父子组件之间传值，自己用过但是不是很熟练，这里我抽空整理了一下思路，写写自己的总结。

GitHub地址：https://github.com/leileibrother/wechat-vue

文件目录如下图，example.vue是父组件，exampleChild.vue是子组件。

父组件引入子组件，父组件html的代码如下：

<template>  <div>   <h3>这是父组件</h3>   <p style="margin: 20px 0;text-align: center;">    <span>子组件传过来的值是 “{{childValue}}”</span>   </p>   <example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child>  </div> </template> <script>  import exampleChild from './examplechild.vue';  export default {   name: "example.vue",   components: {    exampleChild   },   data(){    return {     parentMsg:'hello',     childValue:''    }   },   mounted(){   },   methods: {    getValue:function (val) {     this.childValue = val;    }   }  } </script> <style scoped> </style>

子组件代码如下：

<template>  <div>   <p style="margin: 20px 0;text-align: center;">我是子组件，父组件穿传过来的值是{{message}}</p>   <p style="margin: 20px 0;text-align: center;">    <button @click="send">点击向父组件传值</button>   </p>  </div> </template> <script>  export default {   name: "exampleChild.vue",   props:['message'],   data(){    return {    }   },   mounted(){   },   methods: {    send:function () {     this.$emit('getChildValue','你好父组件！')    }   }  } </script> <style scoped> </style>

1，父组件向子组件传值。

在父组件中使用v-bind来绑定数据传给子组件，如我写的v-bind:message="parentMsg"，把message字段传给子组件，