匿名插槽-slot
Slot插槽 —— 实现内容分发
-
什么是slot?
- slot的意思是插槽，其目的在于让组件的可扩展性更强。
- 打个比方说：假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的。
-
<strong>匿名solt</strong>
- 下面这个示例是一个匿名slot，它只能表示一个插槽:
<body>
<div id="app">
<my-component>
<div>
<p>测试内容</p>
</div>
</my-component>
</div>
<!--自定义组件-->
<template id="my-component">
<div>
<div id="panel_header">面板头部</div>
<slot>匿名插槽,可以放任何标签, 默认就显示提示内容</slot>
<div id="panel_footer">面板尾部</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
//注册组件
Vue.component('my-component', {
template: '#my-component'
});
//实例化
new Vue({
el:'#app'
});
</script>
结合上述案例，我们再进一步来了解：比如我们定制了一个button组件，在根组件里注册为vButton，从而复用。那么各个button上的文字肯定是不同的，但是这些文字大部分情况下也是不需要动态更新的，那么就不必用props之类的方法从根组件向子组件传递文字，直接用slot即可。
