vue(十八)——vue中插槽(slot)默认插槽，具名插槽、作用域插槽 vue

使用场景：父组件在子组件标签中插入内容，显示出来
——————————
我们知道，在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。
插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。
你可能不太明白，为什么我要给子组件中传入HTML，而不直接写在子组件中呢？答案是这样的。你可以想象一个场景，你有五个页面，这五个页面中只有一个区域的内容不一样，你会怎么去写这五个页面呢？复制粘贴是一种办法，但在vue中，插槽(slot)是更好的做法。

下面代码中子组件中并没有定义插槽，所以父组件向子组件中插入的内容并不会显示在页面上

非父子组件间传值 src="https://www.it610.com/article/vue.js"> 父组件插入HTML > Vue.component('child',{ template:' hello ' }) var vm=new Vue({ el:'#root' })

文章图片

文章图片

参考链接
文章图片

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。
由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。
非插槽模板指的是html模板，指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；
插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高，更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

文章图片

怎么使用插槽？
在父组件引用的子组件中写入（插入）想要显示的内容（可以使用标签，也可以不用，当然再父组件引用的子组件中也可以写入其他组件）
在子组件中写入slot，slot所在的位置就是父组件要显示的内容
————————————
可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容（匿名插槽和具名插槽均可以有默认内容，）

1.单个插槽 | 默认插槽 | 匿名插槽

匿名插槽，我们又可以叫它单个插槽或者默认插槽。与具名插槽相对，它不需要设置name属性。（它隐藏的name属性为default。）
匿名插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

示例代码

Vue.component('child',{ template: 'hello ' })

文章图片

通过上面的代码我们可以看出，通过插槽我们可以很方便的向子组件中插入DOM元素

2.具名插槽

插槽加了name属性，就变成了具名插槽。匿名插槽只有一个，而具名插槽可以有多个。
slot属性对应的内容都会和组件中name一一对应。
而没有名字的，就是默认插槽！！
————————
在父组件中写入对应的slot值来指定该内容在子组件中现实的位置，没有对应值的其他内容会被放到子组件中没有添加name属性的slot(默认插槽)中

header内容 footer内容 src="https://www.it610.com/article/vue.js"> > Vue.component('child',{ template: //在使用的时候，指定solt的name，就可以替换指定的slot插槽。 'hello ' }) var vm=new Vue({ el:'#root' })

文章图片

3.作用域插槽
作用域插槽可以叫它带数据的插槽
主要解决的是父组件在向子组件插槽传递模板内容时存在访问子组件数据的问题

在子组件的slot标签上绑定需要的值，在父组件上使用slot-scope属性
作用域插槽要求，在slot上面绑定数据

{{number.item}} src="https://www.it610.com/article/vue.js"> > Vue.component('child',{ data:function(){ return { list:[1,2,3,4] } }, //在创建组件的时候，需要定义模板对象，注意： template 的 value值： //1、通常是一个字符串， //该字符串中如果存在多层div嵌套，肯定存在换行，此时不应该使用单引号，而应该使用键盘上左上角数字1左边的那个键 //2、该value的值（字符串）外层，必须有一个跟元素（例如div）包括着。 template: //注意是反引号(键盘1左边的符号)，而不是单引号 ` `}) var vm=new Vue({ el:'#root' })

【vue(十八)——vue中插槽(slot)默认插槽，具名插槽、作用域插槽】