组件之间的通信

准备阶段

先写子组件componentA.vue：

<template>  <div class="hello">    <h1>{{ msg }}</h1>  </div></template><script>  export default {    name : 'componentA',    data : function() {      return {        msg: 'component a'      }    }  }</script><style scoped>  h1, h2 {    font-weight: normal;    color: #42b983;  }</style>

在父组件（App.vue）中导入上面的组件：

<template>  <div id="app">    <h1>{{ title }}</h1>    <component-a></component-a>   <!--将驼峰式的写法要写成左边那样-->    ....  </div></template><script>  import componentA from './components/componentA.vue' //*  export default {    name: 'hello',    components: { componentA },  //*    data: function() {      return {        ....      }    },    methods: {        .....    }  }</script><style>    ....</style>

那么子组件如何收到父组件的信息呢？

父组件里面：

<component-a fathertell="hello, my son"></component-a>

子组件里面：要加上props这个属性，并且里面的变量名要表示成字符串的形式，并且在子组件里面可以访问到这个变量

  export default {    name : 'componentA',    props: ['fathertell'],    data : function() {      return {        msg: 'hello from component a'      }    }  }

子组件向父组件传递参数的情况

父组件里：父组件中使用v-on绑定自定义事件，如这样v-on:child-tell="listenToMySon"，其中”child-tell“就是我的自定义事件，而”listenToMySon“就是事件处理函数

<p>Child tells: {{ childWords }}</p><component-a fathertell="hello, my son" v-on:child-tell="listenToMySon"></component-a>

  export default {    name: 'hello',    components: { componentA },    data: function() {      return {        ...        childWords : ''    //这个与显示的{{ childWords }}对应      }    },    methods: {      listenToMySon : function(msg) {   //自定义事件的事件处理函数          this.childWords = msg;      }    }  }

子组件里：子组件当然是要触发这个自定义事件了，在这里我让点击按钮时触发

<button @click="onClickMe">ComponentA say</button>

methods: {  onClickMe: function() {    this.$emit('child-tell', this.msg);  //参数：自定义事件 传给父组件的参数（这个与父组件的事件处理                                    //函数的参数对应）  }}