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

<div> <!--子组件直接写在调用方的模板中--> <parent> <child></child> <child></child> <child></child> </parent> </div> //父组件 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> <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> <tab> <tab-page>Page1</tab-page> <tab-page>Page2</tab-page> <tab-page>Page3</tab-page> </tab> </div>

相关笔记

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

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