一、父组件向子组件

• ref，被用来给元素或子组件注册引用信息。所以父组件在引用子组件时，就会用到ref来注册引用信息，如ref="b"，b代表注册在父组件上的名称，通过这个名称可以找到该组件，如下：

<template id="aaa">
    <div>
        <button @click="get">get</button>
        <bbb ref="b"></bbb>
        </div>
</template>
<script>
        Vue.component("aaa",{
        template:"#aaa",
        methods:{
            get(){
                console.log(this.$refs);
                this.$refs.b.msg = "get"
            }
        }
    })          
</script>

• 当绑定在父组件上的get()事件被触发时，可以通过this.refs.b即可获取组件的信息，这时可以通过该方法改变子组件的属性，this.$refs.b.msg = "get"把子组件中的数据msg的值改成了get，完成了父->子的通信
• 子组件的信息就会被注册到父组件上：

<template id="bbb">
    <div>
        <input type="text" v-model="msg">
    </div>
</template>
<script>
    Vue.component("bbb",{
        template:"#bbb",
        data(){
            return {
                msg:"hello"
            }
        }
    })     
</script>

二、子组件向父组件

1.通过props通信

• （1）子组件在自身绑定一个方法，并且把要传到的父组件的数据放到方法的参数里面->@click="change(msg)"，并且在本身通过props的方式把方法传递过去->props:["change”]，如下：

 <template id="son">
    <div>
        <p>这是子组件</p>
        <p>
            <button @click="change(msg)">我要对父亲说的话！</button>
        </p>
    </div>
</template>
<script>
    Vue.component("son", {
         template: "#son",
         props:["change"],
         data() {
             return {
                 msg: "今天很舒服"
             }
         }
    })
</script>

• （2）父组件在引用子组件时，在子组件上绑定一个和props传过来的同名事件，在该事件上绑定本身的一个方法->:change=“changeMsg”，当点击的时候，就会触发子组件的方法，自身的方法也会触发，传入的参数为子组件的参数，changeMsg(msg){}，里面即可执行相关操作，从用子组件的数据改变自身的数据

<template id="father">
    <div>
        <p>这是父组件</p>
        <p>这是我儿子要和我说的话 ===> {{pMsg}}</p>
        <hr>
        <son :change="changeMsg"></son>
    </div>
</template>
<script>
    Vue.component("father", {
        template: "#father",
        data() {
            return {
                pMsg: ""
            }
        },
        methods:{
            changeMsg(msg){
                this.pMsg = msg
            }
        }
    })
</script>

2.通过emit通信

• （1）子组件给自身绑定一个方法，该方法内用写上this.$emit("change",this.msg)，该方法在父组件点击时会自动触发执行，从而把数据传递过去

<template id="son">
    <div>
        <p>这是子组件</p>
        <p>
            <button @click="say">我要对父亲说的话！</button>
        </p>
    </div>
</template>
<script>
    Vue.component("son", {
        template: "#son",
        data() {
            return {
                msg: "今天很舒服"
            }
        },
        methods:{
            say(){
                this.$emit("change",this.msg)
            }
        }
    })
</script>

• (2)父组件在引用子组件时，绑定一个和传递过来的同名事件，同时绑定写上一个父组件本身的方法->@change="changeMsg"，当同名事件被触发时，该方法也被触发，该方法的参数写上子组件传递过来的参数，即可完成子组件向父组件的通信

<template id="father">
    <div>
        <p>这是父组件</p>
        <p>这是我儿子要和我说的话 ===> {{pMsg}}</p>
        <hr>
        <son @change="changeMsg"></son>
    </div>
</template>
<script>
    Vue.component("father", {
        template: "#father",
        data() {
            return {
                pMsg: ""
            }
        },
        methods:{
            changeMsg(msg){
                this.pMsg = msg
            }
        }
    })     
</script>