什么是插槽:
顾名思义,一个萝卜一个坑。子组件创建的标签插入的内容不会在浏览器显示。这时需要用到Vue新的语法slot。
Vue为什么要用插槽:
组件标签是组件定义好的内容,当我们想在组件标签内放一些东西的时候。是不具有作用的。他不会显示。
<foo>
<div>hello</div>
</foo>
浏览器中不会显示hello。dom结构中也没有div
Vue.component('foo', {
template: `<div>
<p>dll</p>
</div>`
})
var vm = new Vue({
el: '#app',
})
显示结果为dll。明显,自定义组件标签foo里面添加的div内容hello不会被展示。
当我们使用插槽后
Vue.component('foo', {
template: `<div>
<slot></slot> //添加插槽标签
<p>dll</p>
</div>`
})
var vm = new Vue({
el: '#app',
})
这是插槽的简单应用。
slot的特点:
插槽的位子由组件标签觉定。插槽的内容由父组件控制。
插槽可以写默认内容。当子组件没有内容的时候,就会显示默认内容
插槽分为具名插槽和匿名插槽(单个插槽不需要写名name)。需要多个插槽的时候需要使用具名插槽,实现一对一的操作。
具名插槽的使用:以下代码我想实现的是head和body分别插入子组件的两个插槽里。但浏览器结果并不是这样
以上说明。子组件的内容会作为一组全部插入一个插槽中。
所以现在我们需要使用具名插槽。给每一一个对应的标签和插槽一一对应。这样就实现了一个萝卜一个坑。
难点:作用域插槽(非常实用)
首先我们在子组件定义了一个插槽。插槽的内容为遍历一个数组添加到对应的标签上(标签是啥用父组件决定)
怎么定义作用域插槽:
在子组件标签中添加template模板标签。填写slot-scope=“xxx”(xxx为接收子组件传递过来的数据内容。自定义形参)
在模板标签中填写需要展示的标签。