父组件访问子组件的方式$children

一、父访子的方式 $children

当父组件想要直接访问子组件时，可以通过父组件的$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的缺点

利用$children获取到的数组类型，访问其中的组件必须通过索引值。
当子组件过多时，往往不能确定他的索引值，所以引进了新的父访子的方式$refs

三、直接父访子的缺点

虽然可以通过$children的方式直接获取子组件对象，进而获取子组件中的方法和数据，但是在一个组件中直接获取另一个组件去操作数据和方法的方式，会让两个组件的耦合度变高，组件的独立性下降，后期维护困难。