一、父組件向子組件

• 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>