Slot分发内容
①概述:
简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责的活。
②默认情况下
父组件在子组件内套的内容,是不显示的。
例如代码:
<div id="app">
<children>
<span>12345</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值,不会继续派发
template: "<button>为了明确作用范围,所以使用button标签</button>"
}
}
});
</script>
显示内容是一个button按钮,不包含span标签里面的内容;
③单个slot
简单来说,只使用这个标签的话,可以将父组件放在子组件的内容,放到想让他显示的地方。
<div id="app">
<children>
<span>12345</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值,不会继续派发
template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>"
}
}
});
</script>
例如这样写的话,结果是:
<button><span>12345</span>为了明确作用范围,所以使用button标签</button>
即父组件放在子组件里的内容,插到了子组件的<slot></slot>位置;
注意,即使有多个标签,会一起被插入,相当于用父组件放在子组件里的标签,替换了<slot></slot>这个标签。
了解更多: http://www.jb51.net/article/92289.htm