<my-awesome-list :items="items"> <!-- 作用域插槽也可以是具名的 --> <template slot="item" scope="props"> <li>{{ props.text }}</li> </template> </my-awesome-list>
以上的template中的props其实和子组件的props属性是相同的，子组件传递了什么prop，它就接收什么，像是下边的传了个text
<ul> <slot v-for="item in items" :text="item.text"> <!-- 这里写入备用内容 --> </slot> </ul>
我看了很长很长时间，为什么要这么拐个弯呢。。。
————一夜过后—————
这样内容更灵活：数据是相同的（父组件提供数据），子组件负责了循环（添加逻辑），父组件引用子组件时插入的作用域插槽的模板决定了（展示的形式）！这分工！！！点个赞！！！
我修改了一下自己的table然后页面展示了个空白。之后发现问题出在子组件往外传数据的时候变量名不能用"name"。修改掉。
关注点：动态组件使用
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：很适用于制作Tab类的效果
<component v-bind:is="currentView" ：data1="data1" :data2="data2"> <!-- 组件在 vm.currentview 变化时改变！ --> </component>
在methods属性中定义一个函数修改currentView即可。
视情况可以配合 keep-alive 避免重新渲染
在子组件上放置activate钩子做切换时的工作：done() //放到钩子最后，表示执行工作完毕，可以切换组件，配合keep-alive使用，activate钩子只执行一次
子组件接收数据和以往相同，只是这一次都写在了component中，只是如此的话，每个子组件都需要有这些接口(prop)
暂时说到这里，突然得回头看一下react，没时间了，回头会继续。
以上这篇vue2.X组件学习心得(新手必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: