slot插槽
vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。
匿名插槽
在父组件中使用子组件的时候，在子组件标签内部写入内容，在子组件的模板中可以通过
来使用
<body>
<div id="app">
<!-- 匿名插槽 -->
<tem>
<div>内容a</div>
<div>内容B</div>
</tem>
</div>
<template id="tem">
<div>
<slot></slot>
<h2>标题</h2>
<slot></slot>
</div>
</template>
</body>
<script>
Vue.component("tem", {
template: "#tem",
})
new Vue({
el: "#app",
})
</script>
结果：内容a
内容B
标题
内容a
内容B
缺点：如果多个
具名插槽
父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过通过使用带有name属性的slot标签来放置对应的slot。
<body>
<div id="app">
<!-- 具名插槽 -->
<tem>
<div slot="a"> a内容</div>
<div slot="b">内容b</div>
</tem>
</div>
<template id="tem">
<div>
<slot name="a"></slot>
<h2>标题</h2>
<slot name="b"></slot>
</div>
</template>
</body>
<script>
Vue.component("tem", {
template: "#tem",
})
new Vue({
el: "#app",
})
</script>
结果：a内容
标题
内容b
v-slot作用域插槽
新版本2.6支持v-slot方式
注意：- 要引入2.6版本以上的vue.js）
- 在使用时，必须在template标签内
<body>
<div id="app">
<hello>
<!-- 在template中设置v-slot a='info'接收数据数组对象,通过info. 调用数据 -->
<template v-slot:a='info'>{{info.msg1}}</template>
<!-- v-slot: 可简写成 # ，可以通过ES6的解构获取对象-->
<template #a='{arr}'>{{arr}}</template>
</hello>
</div>
<template id="hello">
<div>
<!-- 在组件模板的slot中绑定数据 -->
<slot name="a" :msg1='msg'></slot>
<h3>标题</h3>
<slot name="b" :arr="arr"></slot>
</div>
</template>
</body>
<script>
Vue.component('hello', {
template: "#hello",
data() {
return{
msg: "hello world",
arr:[1,2,3,4,5]
}
}
})
new Vue({
el: "#app",
})
</script>