Vue父子组件之间的相互通信

组件是Vue知识体系中最重要的一部分之一，父子组件由于作用域的不同，无法直接对对方的数据进行操作。它们之间的数据传递都是通过中间介质进行的，父组件给子组件传值是通过props属性，而子组件给父组件传值是通过自定义事件。

1.父组件向子组件传值

     <div id="app">
         <parent></parent>
     </div>

     <template id="parent">
     　　<div>
     　　　　<div style="border:1px solid red;width: 300px;">
     　　　　　　<h1>父组件</h1>
     　　　　　　<p>{{parentMsg}}</p>
     　　　　</div>
     　　　　<child :get-parent="parentMsg"></child>
     　　</div>
     </template>

     <template id="child">
     　　<div>
     　　　　<h1>子组件</h1>
     　　　　<p>{{childMsg}}</p>
            <button @click="printParentMsg()">父组件信息</button>
     　　</div>
     </template>

     <script>

         var child={
     　　　　data(){
     　　　　　　return {
     　　　　　　　　childMsg:"我是子组件数据"
     　　　　　　}
     　　　　},
     　　　　template:"#child",
            props: ['getParent'],
            methods: {
                printParentMsg(){
                    alert('父组件信息：' + this.getParent);
                }
            }
     　　};

     　　var parent={

     　　　　data(){
     　　　　　　return {
     　　　　　　　　parentMsg:"我是父组件的数据"
     　　　　　　}
     　　　　},

     　　　　components:{
     　　　　　　'child':child
     　　　　},

             template: '#parent'
         }

     　　new Vue({
     　　　　el:"#app",
     　　　　components:{
     　　　　　　'parent':parent
     　　　　}
     　　});

     </script>

具体方法：

1.子组件在props中创建一个属性，用来接收父组件传来的值

2.父组件中注册子组件

3.在父组件模板中的子组件标签添加对应于子组件props中的属性

4.把需要传递的值赋给上一步子组件标签创建的属性（这里要注意的是props中的属性用驼峰命名法，标签中的属性用横杠命名法）

2.子组件向父组件传值

     <div id="app">
         <parent></parent>
     </div>

     <template id="parent">
     　　<div>
     　　　　<div style="border:1px solid red;width: 300px;">
     　　　　　　<h1>父组件</h1>
     　　　　　　<p>{{parentMsg}}</p>
     　　　　</div>
     　　　　<child v-on:receive-msg="handleMsg"></child>
     　　</div>
     </template>

     <template id="child">
     　　<div>
     　　　　<h1>子组件</h1>
     　　　　<p>{{childMsg}}</p>
            <button @click="sendToParent">传递信息</button>
     　　</div>
     </template>

     <script>

         var child={
     　　　　data(){
     　　　　　　return {
     　　　　　　　　childMsg:"我是子组件数据"
     　　　　　　}
     　　　　},
     　　　　template:"#child",
            props: ['getParent'],
            methods: {
                sendToParent(){
                    console.log('sendToparent')
                    this.$emit("receive-msg", "已经收到子组件传来的消息");
                }
            }
     　　};

     　　var parent={

     　　　　data(){
     　　　　　　return {
     　　　　　　　　parentMsg:"我是父组件的数据"
     　　　　　　}
     　　　　},

     　　　　components:{
     　　　　　　'child':child
     　　　　},

            template: '#parent',

            methods: {
                handleMsg: function(msg){
                    console.log('handleMsg')
                    alert(msg);
                }
            }
         }

     　　new Vue({
     　　　　el:"#app",
     　　　　components:{
     　　　　　　'parent':parent
     　　　　}
     　　});

     </script>

具体方法：

1.子组件在某种条件下触发一个自定义事件

2.该自定义事件需要挂载在父组件的子组件标签上，让父组件可以监听到这个自定义事件

3.将需要传的值放在$emit方法的第二个参数上，该值将作为实参传递给响应自定义事件的方法

（注意！这里有个小坑：自定义事件貌似不支持驼峰命名法，改用横杠命名即可，否则会接收不到值）