Vue中$parent 和$children的使用

$parent 该组件实例的父级组件实例

$children 该组件实例的子组件实例

上代码

html部分

<div id='box'>              <parent ref='pa'></parent></div>  

script部分

Vue.component('parent',{    template:`<div><h1>父组件</h1><child></child></div>`,    components:{        'child':{            template:`<div><h2>这是子组件</h2></div>`        }                   }})new Vue({    el:'#box',    created:function(){        this.$nextTick(()=>            console.log(this.$refs.pa.$parent)   //打印的name为<Root>即根实例        )    }})      

再次测试一下

new Vue({    el:'#box',    created:function(){        this.$nextTick(()=>            console.log(this.$refs.pa.$parent==this)   //显示为true        )    }})  

测试一下$children

new Vue({    el:'#box',    created:function(){        this.$nextTick(()=>            console.log(this.$refs.pa.$children)   //显示为一个数组        )    }})  

为什么不直接是一个组件实例呢？
再次看了看Vue的API。原来$children的数据类型就是Array！