如何理解Vue.js的组件中的slot
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何理解Vue.js的组件中的slot相关的知识，希望对你有一定的参考价值。
子组件在props中定义数据，然后父组件传数据过去，例如： 子组件： props: show: default: false 父组件： //test是子组件名字 parentShow是父组件定义的data数据 参考技术A 主要是让组件的可扩展性更强。1.匿名slot使用
//定义组件my-component<div class="myComponent"><slot></slot></div>//使用方法<my-component><p>我就是slot的替代内容，这里可以放任何标签元素，即使是一长串ul>li列表</p></my-component>
2.具名slot使用
//定义组件my-component<div class="myComponent"><slot name="mySlot"></slot></div>//使用方法<my-component><p slot="mySlot">我就是这个叫mySlot的slot替代内容，这里可以放任何标签元素，即使是一长串ul>li列表，但是我是一个有名字的宝宝，所以你必须给我加上slot="mySlot"，不然我就报错给你看！</p></my-component>
如果不在有slot的组件里加入任何标签，slot什么都不会显示本回答被提问者采纳
以上是关于如何理解Vue.js的组件中的slot的主要内容，如果未能解决你的问题，请参考以下文章
通过 Vue.js 中的 slot-scope 将 props 传递给所有子项的正确方法
Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听