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

上兩篇提到父子組件間的通訊可以通過數據傳遞的方式，通過props和$emit。父子組件之間還可以相互引用，父組件拿到子組件的實例，進而調用子組件的屬性和方法等。反之，子組件拿到父組件的實例也是一樣。先看下父組件如何引用子組件，兩種方式$children和$refs。

$children方式

$children返回的是子組件的數組。可以通過下標獲取子組件實例，進而引用子組件的屬性和方法。如下：

    <div id="app">
        <mycpn></mycpn>
        <button @click="btnclick">點擊</button>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
        </div>
    </template>
    <script>

        //相當於vue的子組件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '我是子組件'
                }
            },
            methods:{
                showMessage(){
                    console.log('子組件方法！');
                }
            }
         }
        //創建並註冊組件
        Vue.component('mycpn',mycpn);
        //vue相當於父組件
        const vue = new Vue({
            el:"#app",
            components:{
                mycpn:mycpn
            },
            methods:{
                btnclick(){
                    //$children方式，返回子組件數組
                    //引用子組件的方法
                    this.$children[0].showMessage();
                    //引用子組件的屬性
                    console.log(this.$children[0].title);
                }
            }
        });
    </script>

效果如下：

 

$refs方式

$children是通過下標的方式獲取組件實例，如果組件的個數或者順序發生改變，引用的下標也要發生改變，因此，這種方式有弊端。

$refs方式通過給組件添加ref屬性，通過ref屬性名稱名稱獲取組件，不必關心子組件的順序或者數量的改變，只要子組件ref屬性名稱不變就可以找到。

如下所示：

    <div id="app">
        <mycpn ref="a"></mycpn>
        <mycpn ref="b"></mycpn>
        <mycpn ref="c"></mycpn>
        <button @click="btnclick">點擊</button>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
        </div>
    </template>
    <script>

        //相當於vue的子組件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '我是子組件'
                }
            },
            methods:{
                showMessage(){
                    console.log('子組件方法！');
                }
            }
         }
        //創建並註冊組件
        Vue.component('mycpn',mycpn);
        //vue相當於父組件
        const vue = new Vue({
            el:"#app",
            components:{
                mycpn:mycpn
            },
            methods:{
                btnclick(){
                    //$children方式，返回子組件數組
                    //引用子組件的方法
                    //this.$children[0].showMessage();
                    //引用子組件的屬性
                    //console.log(this.$children[0].title);

                    //$refs方式,默認返回空
                    this.$refs['a'].showMessage();
                    console.log(this.$refs['a'].title);

                    this.$refs['b'].showMessage();
                    console.log(this.$refs['b'].title);
                }
            }
        });
    </script>

效果如下：