Vue初學20-父子組件間的引用-子組件引用父組件

父子間引用子組件用的比較多，子組件引用父組件用的相對較少。子組件引用父組件使用$parent。

如下所示，子組件中的按鈕綁定點擊事件，彈出顯示父組件的title屬性。

<div id="app">
        <mycpn></mycpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <button @click="btnclick">子組件按鈕</button>
        </div>
    </template>
    <script>

        //相當於vue的子組件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '我是子組件'
                }
            },
            methods:{
                btnclick(){
                    //彈出顯示父組件中的title
                    alert(this.$parent.title);
                }
            }
         }
        //創建並註冊組件
        Vue.component('mycpn',mycpn);
        //vue相當於父組件
        const vue = new Vue({
            el:"#app",
            data:{
                title:"我是父組件"
            },
            components:{
                mycpn:mycpn
            }
        });
    </script>

效果如下：

如果嵌套了多層子組件，子組件可以用$root引用最外層的父組件，即根組件。