一杯矩、父組件向子組件

• ref抓歼，被用來給元素或子組件注冊引用信息。所以父組件在引用子組件時(shí)论寨，就會用到ref來注冊引用信息赖临，如ref="b"胞锰，b代表注冊在父組件上的名稱，通過這個(gè)名稱可以找到該組件兢榨，如下：

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

• 當(dāng)綁定在父組件上的get()事件被觸發(fā)時(shí)嗅榕，可以通過this.refs.b即可獲取組件的信息凌那，這時(shí)可以通過該方法改變子組件的屬性，this.$refs.b.msg = "get"把子組件中的數(shù)據(jù)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）子組件在自身綁定一個(gè)方法，并且把要傳到的父組件的數(shù)據(jù)放到方法的參數(shù)里面->@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）父組件在引用子組件時(shí)，在子組件上綁定一個(gè)和props傳過來的同名事件麦锯，在該事件上綁定本身的一個(gè)方法->:change=“changeMsg”恕稠，當(dāng)點(diǎn)擊的時(shí)候，就會觸發(fā)子組件的方法扶欣，自身的方法也會觸發(fā)鹅巍，傳入的參數(shù)為子組件的參數(shù)，changeMsg(msg){}料祠，里面即可執(zhí)行相關(guān)操作骆捧，從用子組件的數(shù)據(jù)改變自身的數(shù)據(jù)

<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）子組件給自身綁定一個(gè)方法，該方法內(nèi)用寫上this.$emit("change",this.msg)髓绽，該方法在父組件點(diǎn)擊時(shí)會自動觸發(fā)執(zhí)行敛苇，從而把數(shù)據(jù)傳遞過去

<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)父組件在引用子組件時(shí)顺呕，綁定一個(gè)和傳遞過來的同名事件枫攀，同時(shí)綁定寫上一個(gè)父組件本身的方法->@change="changeMsg"，當(dāng)同名事件被觸發(fā)時(shí)株茶，該方法也被觸發(fā)来涨，該方法的參數(shù)寫上子組件傳遞過來的參數(shù)，即可完成子組件向父組件的通信

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