<div>{{$children.length}}</div> <!--此处显示0，应该为3-->
<child></child>
<child></child>
<child></child>
</div>
//子组件代码
Vue.component("child", {
template: "<div>child</div>",
});
//父组件声明
new Vue({
el: "#app",
});
如下图：
解决方案1：使用$forceUpdate()
注册父组件的mounted方法，执行$forceUpdate()
<div id="app">
<div>{{$children.length}}</div>
<child></child>
<child></child>
<child></child>
</div>Vue.component("child", {
template: "<div>child</div>",
});
new Vue({
el: "#app",
mounted: function () {
this.$forceUpdate();//强制重新绘制
}
});
$children正确了：
解决方案2：使用vm的变量代替$children
注册父组件的mounted方法，将$children赋值给自定义的vm的变量。
同时模板中使用自定义的变量来代替默认的$children
<div id="app">
<div>{{child.length}}</div> <!--使用自定义的child对象-->
<child></child>
<child></child>
<child></child>
</div>Vue.component("child", {
template: "<div>child</div>",
});
var vm = new Vue({
el: "#app",
data: {
child: [] },
mounted: function () {
this.child = this.$children;//手动将$children对象赋值给自定义child变量
}
});
至于导致此问题的原因只能通过阅读vue2.0版本的源码才能了解了。
4、若父组件的template或render函数中无引用slot元素，则$children恒等于空数组
此问题关联上面第3个问题。
触发此问题的前提：
vue2.0版本
父组件和子组件都直接写在调用方模板中
在模板中访问$children变量
已经解决在上述问题3中强制刷新的问题
<div id="app">
<!--子组件直接写在调用方的模板中-->
<parent>
<child></child>
<child></child>
