匿名插槽子组件:
父组件调用这个匿名组件时,传递过来的内容可以替换掉,来展示相应的内容。
具名插槽子组件:
对比匿名,在slot多了一个name属性
vue2.6版本新用法
在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中,被废弃的这两个,不会被支持即无效。
原来父组件中的
<div slot="nameSlot"> 改成 <template v-slot:nameSlot >
// 指令+参数形式写并且是在tenmplate标签上。
// 所以原本父组件中下面的nameVSlot的写是2.6.0的新版本哦~
作用域插槽:
绑定了一个具体的数据源,这样就可以在父组件使用作用域插槽的数据(子组件内数据可以被父页面拿到)
//在子组件中代码
:data="data" //第一个data是属性,第二个data是数据data.
//在父组件中代码
<template slot="childSlot" slot-scope="slotValue">
//通过slot="childSlot"来绑定作用域插槽
//通过slot-scope来获取插槽内的数据,slotValue可以自己命名
//而slotValue.data中的data是确定的,是子组件:data="data",
vue2.6版本新用法
vue 2.6.0之后 v-slot 只能用在 组件component 或者 template 上 ,用在 div 或 p 这种标签上是会报错的
在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中,被废弃的这两个,不会被支持即无效。
1) 两个属性合并成了一个 v-slot : 插槽名称 = ’ 传过来的值 ’ 。
<child-slot v-slot:childSlot="slotValue">
//这样就可以通过slotValue.data使用数据
2) 组件页面中slot的内容没有变化 。
3) v-slot 不能用在 html 标签上 。
4) 如果是默认插槽 可以写成 v-slot=‘xxx’。
5) 还增加了 可以es6解构插槽props 和 设置默认值的内容,
<child-slot v-slot:childSlot="{ data }">
直接使用data