<!--parent.vue-->
<template>
    <div>
        <h4>我是父組件：</h4>
        <p>這是我自己的數(shù)據(jù){{num}}</p>
        <!--通過給子組件傳入自定義屬性值，傳數(shù)據(jù)用v-bind或者簡(jiǎn)寫形式:號(hào)， 傳方法可以使用v-on或者簡(jiǎn)寫@符綁定事件-->
        <child :p-num="num" :p-num2="num2" @changePNum="changeNum" />
    </div>
</template>
<script>
    import child from './child.vue'
    export default{
        name: 'parent',
        data(){
            return{
                num: 10,
                num2: 20
            }
        },
        methods:{
            changeNum(n){
                this.num = n;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <h4>我是子組件：</h4>
        <!--第一種可以使用props對(duì)象來接收父級(jí)傳過來的屬性-->
        <p>這是通過props接收父級(jí)組件傳過來的數(shù)據(jù){{ pNum}}</p>
        <!--第二種是通過元素的實(shí)例屬性$attrs獲取，沒有唄props接收的剩余屬性-->
        <p>這是通過組件中的$attrs對(duì)象獲取父級(jí)組件傳過來的數(shù)據(jù){{ $attrs['p-num2']}}</p>
        <!--第三種是通過當(dāng)前實(shí)例中的$parent屬性拿到父級(jí)實(shí)例對(duì)象-->
        <p>這是通過組件中的$attrs對(duì)象獲取父級(jí)組件傳過來的數(shù)據(jù){{ topNum }}</p>
        <button @click="changeNum">通過$emit改變父級(jí)的數(shù)據(jù)</button>
        <button @click="changeNum2">通過$listeners改變父級(jí)的數(shù)據(jù)</button>
        <button @click="changeNum3">通過$parent改變父級(jí)的數(shù)據(jù)</button>
    </div>
</template>
<script>
    export default{
        name: 'child',
        // 第一種可以使用props對(duì)象來接收父級(jí)傳過來的屬性
        props:{
            // 這里寫對(duì)應(yīng)的要接收的屬性名以駝峰的形式接收
            pNum: {
                type: Number
            }  
        },
        data(){
            return {
                topNum: 0
            }
        },
        created(){
            // 通過使用實(shí)例中的$parent拿到父級(jí)組件的實(shí)例，然后獲取值
            this.topNum = this.$parent.num;  
        },
        methods:{
            changeNum(){
                // 這里是通過當(dāng)前組件中的$emit方法來調(diào)用父級(jí)傳過來的方法，并且可以傳入?yún)?shù)
                this.$emit('changePNum', 40);
            },
            changeNum2(){
                // 通過組件中的$listeners中的存儲(chǔ)的父級(jí)傳過來的方法進(jìn)行調(diào)用
                this.$listeners.changePNum(50);
            },
            changeNum3(){
                // 通過組件中的$listeners中的存儲(chǔ)的父級(jí)傳過來的方法進(jìn)行調(diào)用
                this.$parent.changeNum(60);
            }
        }
    }
</script>

<!--parent-->
<template>
    <div>
        <button @click="changeChildANum">通過$refs調(diào)用子組件方法更改子組件數(shù)據(jù)</button>
        <button @click="changeChildBNum">通過$children調(diào)用子組件方法更改子組件數(shù)據(jù)</button>
        <p>這是獲取的子組件childA的數(shù)據(jù)：{{childA_num}}</p>
        <p>這是獲取的子組件childB的數(shù)據(jù)：{{childB_num}}</p>
        <!--這里通過使用ref把組件示例注冊(cè)到當(dāng)前組件的$refs中-->
        <child-a ref="childA"/>
        <child-b />
    </div>
</template>
<script>
    import childA from './childA.vue';
    import childB from './childA.vue';
    export default{
        components:{
            childA,
            childB
        },
        data(){
            return {
                childA_num: 0,
                childB_num: 0
            }
        },
        created(){},
        mounted(){
            // $refs 和 $children 都是需要在mounted中才能獲取到
            // 這里通過$refs獲取注冊(cè)在里邊的子組件實(shí)例，并且獲取他的數(shù)據(jù)
            this.childA_num = this.$refs.childA.num
            // 第二種方式通過當(dāng)前組件示例中的$children獲取子組件實(shí)例
            this.childB_num = this.$children[1].num;
        },
        methods:{
            changeChildANum(){
                // 這里通過使用$refs中的組件實(shí)例調(diào)用組件中的方法
                this.$refs.childA.changeNum();
            },
            changeChildBNum(){
                // 這里通過使用$refs中的組件實(shí)例調(diào)用組件中的方法
                this.$children[1].changeNum();
            }
        }
    }
</script>
<!--child-->
<template>
    <div></div>
</template>
<script>
    export default{
        name: 'childA',
        data(){
            return{
                num: 10
            }
        },
        methods:{
            changeNum(){
                this.num++;
            }
        }
    }
</script>

<!--parent.vue-->
<template>
    <div>
        <child />
    </div>
</template>
<script>
    import child from './child.vue';
    export default{
        // 通過給父級(jí)定義一個(gè)provide對(duì)象，并且定義成一個(gè)函數(shù)形式，然后返回一個(gè)parentData對(duì)象，并且對(duì)象指向當(dāng)前組件的一個(gè)數(shù)據(jù)對(duì)象上，這樣相當(dāng)于都指向一個(gè)對(duì)象
        provide(){
            return {
                parentData: this.proVideData
            }
        }
        name: 'Parent',
        components:{
            child
        },
        data(){
            return{
                proVideData: {
                    num, 1,
                    changeNum: null
                }
            }
        },
        created(){
            // 然后通過實(shí)例化后把需要被子組件調(diào)用到的方法傳入進(jìn)去
            this.proVideData.changeNum = this.changeNum;
        },
        methods:{
            changeNum(){
                this.proVideData.num++;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <p>{{parentData.num}}</p>
        <button @click="parFun">調(diào)用父級(jí)的方法</button>
    </div>
</template>
<script>
    export default{
        // 子組件通過inject接到祖先組件中的provide廣播的數(shù)據(jù)
        inject:['parentData'],
        name: 'child',
        data(){
            return{
            }
        },
        methods:{
           parFun(){
                // 這里直接執(zhí)行存儲(chǔ)下來的方法
               this.parentData.changeNun();
           } 
        }
    }
</script>

<!--event-bus.js-->
import Vue from 'vue';
// 這里從創(chuàng)建了一個(gè)新的vue實(shí)例對(duì)象
export const EventBus = new Vue();
<!--parent.vue-->
<template>
    <div>
    </div>
</template>
<script>
// 這里引入事件總線
import { EventBus } from './event-bus';
export default{
    data(){
        return{
            eventBusMsg: ''
        }
    },
    created(){
        // 然后給事件總線綁定一個(gè)需要監(jiān)聽的方法，類似于發(fā)布訂閱者的增加訂閱
        EventBus.$on("eventBusMsg", (msg) => {
            console.log(msg);
            this.eventBusMsg = msg;
        });
    },
    beforeDestroy(){
         EventBus.$small("eventBusMsg");
    }
}
</script>
<!--sub.vue后代組件-->
<template>
    <div>
        <button @click="eventBusChange">通過事件總線調(diào)用組件的方法</button>
    </div>
</template>
<script>
// 其他組件也需要你引入該插件
import { EventBus } from './event-bus';
export default{
    data(){
    },
    created(){
    },
    methods:{
        eventBusChange(){
            //這里是通過eventBus來調(diào)用一個(gè)訂閱的消息方法，并傳入值過去
            EventBus.$emit('eventBusMsg', 'childB');
        }
    }
}
</script>