关于Vue.js一些问题和思考学习笔记（2）

Vue.component("child",});

new Vue({
el: "#app",mounted: function () {
this.$forceUpdate();//强制重新绘制
}
});

$children正确了：

解决方案2：使用vm的变量代替$children

注册父组件的mounted方法，将$children赋值给自定义的vm的变量。 同时模板中使用自定义的变量来代替默认的

{{child.length}}

Vue.component("child",});

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中强制刷新的问题

//父组件
Vue.component("parent",{
template: "

parent child:{{$children.length}}

",//模板中无slot元素
mounted(){
this.$forceUpdate();
}
});
Vue.component("child",{
template: "

child

"
});

var vm = new Vue({
el: "#app"
});

解决方案1:

在父组件的模板中加入slot元素。或在render函数中引用了this.$slots.default变量

解决方案2：在父组件模板中编写子组件定义

此解决方案要修改此问题的复现第2要素，即子组件定义从调用方改为写到父组件的模板中也可解决此问题。

Vue.component("parent",{
//直接在父组件中写明调用子组件标签
template: "

parent child:{{$children.length}}

此方法虽然可以解决问题，但是有时我们直接把子组件写在调用方会更方便更利于理解，比如Tab与TabPage组件。 如下Tab组件代码，可能更符合一般人的使用思维：

相关笔记

Vue学习笔记-1()

Vue学习笔记-2()

本文已被整理到了《》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!