一、父訪子的方式 $children

當(dāng)父組件想要直接訪問子組件時亿絮，可以通過父組件的$children方法直接獲取子組件對象卵蛉。
舉例：
父組件通過$children的方法直接獲取兩個子組件對象

        <div id="app">
            <cpn></cpn>
        </div>
        <template id="cpn">
            <div>
                <cpn1></cpn1>
                <cpn2></cpn2>
                <button @click="showChildCpn">顯示所有子組件信息</button>
            </div>
        </template>
        <template id="cpn1">
            <div>
                <h2>子組件1</h2>
            </div>
        </template>
        <template id="cpn2">
            <div>
                <h2>子組件2</h2>
            </div>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            const cpn = Vue.extend({
                template: '#cpn',
                components: {
                    /*子組件1*/
                    cpn1:{
                        template: '#cpn1',
                        data() {
                            return{
                                name:'one'
                            }
                        }
                    },
                    /*子組件2*/
                    cpn2:{
                        template: '#cpn2',
                        data(){
                            return{
                                name:'two'
                            }
                        }
                    }
                },
                methods: {
                    /*打印子組件對象*/
                    showChildCpn() {
                        const children = this.$children
                        for(let i in children) {
                            console.log(children[i]);
                        }
                    }
                }
                
            })
            
            const app = new Vue({
                el: '#app',
                /*注冊父組件*/
                components: {
                    cpn: cpn
                }
            })

打印出兩個子組件對象

image.png

二娘纷、$children的缺點(diǎn)

利用$children獲取到的數(shù)組類型回铛，訪問其中的組件必須通過索引值狗准。
當(dāng)子組件過多時，往往不能確定他的索引值勺届，所以引進(jìn)了新的父訪子的方式$refs

三驶俊、直接父訪子的缺點(diǎn)

雖然可以通過$children的方式直接獲取子組件對象，進(jìn)而獲取子組件中的方法和數(shù)據(jù)免姿，但是在一個組件中直接獲取另一個組件去操作數(shù)據(jù)和方法的方式，會讓兩個組件的耦合度變高榕酒，組件的獨(dú)立性下降胚膊，后期維護(hù)困難。