<meta charset="utf-8">
转载出处 :http://blog.csdn.net/sinat_17775997/article/details/52484072
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>
slot的用法分以下几种情形：
-
单个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>
这里需要注意，即使有多个标签，会一起被插入:
<children>
<span>12345</span>
<span>12345</span>
</children>
这里的两个span都将被插入到button内容中
-
具名slot
两点：
- 父组件在要分发的标签里添加 slot=”name名” 属性
- 子组件在对应分发的位置的slot标签里，添加name=”name名” 属性
<div id="app">
<children>
<span slot="first">12345</span>
<span slot="second">56789</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值，不会继续派发
template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"
}
}
});
</script>
-
当没有分发内容时的默认提示
情形：
- 父组件没有在子组件中放置有标签
- 父组件在子组件中放置标签，但有slot属性，而子组件中没有该slot属性的标签。
这时候，我们可以给子组件中的slot默认内容，如：
<slot name="second">这是默认内容</slot>
关于隐藏子组件，可以在父组件中设置如v-if,v-show，也可以在子组件中去设置，对应的属性应放在对应的父子data中
后期有注意事项及时更新...
链接：https://www.jianshu.com/p/f79d9886f4ec
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
