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

//父组件
Vue.component("parent", {
template: "<p>parent child:{{$children.length}} </p>",//模板中无slot元素
mounted(){
this.$forceUpdate();
}
});
Vue.component("child", {
template: "<div>child</div>"
});

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

解决方案1:父组件模板包含slot元素

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

Vue.component("parent", {
 template: "<p>parent child:{{$children.length}} <slot></slot></p>",
 mounted(){
 this.$forceUpdate();
 }
});

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

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

<div id="app">
 <parent>
 </parent>
</div>
Vue.component("parent", {
 //直接在父组件中写明调用子组件标签
 template: "<p>parent child:{{$children.length}}
 <child></child>
 <child></child>
 </p>",
 mounted(){
 this.$forceUpdate();
 }
});
Vue.component("child", {
 template: "<div>child</div>",
});
var vm = new Vue({
 el: "#app",
 data: {
 child: [] }
});

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

<div id="app">
 <tab>
 <tab-page>Page1</tab-page>
 <tab-page>Page2</tab-page>
 <tab-page>Page3</tab-page>
 </tab>
</div>

相关笔记

Vue学习笔记-1(//www.jb51.net/article/98869.htm)

Vue学习笔记-2(//www.jb51.net/article/98878.htm)

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。