vue-slot
slot基本内容
- 父组件向子组件传递内容
- 扩展，复用，定制组件
类型
- 默认插槽
- 具名插槽
- 作用域插槽
父组件(father.vue)：
...
{{ msg }}
...
return {
...
name: 'father'
...
msg: '这里是父组件'
}子组件(son.vue)：
...
{{ msg }}
...
return {
...
name: 'son'
...
msg: '这里是子组件，我有要事跟父组件讲'
}首先将子组件的内容放到父组件，怎么放呢？
- 首先要在父组件将子组件进行引入并注册
- 在显示部分使用如下
- 在此时此刻父组件内除了本身显示的内容外，也会显示子组件的内容
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
- 我们知道这玩意是父组件 ---> 子组件传值，想在子组件内再显示一些信息，那么怎么传值呢？
- 有些人可能要想了是不是这样（比如我们传一句：’我就是不显示‘）
在
我就是不显示
我就是不显示
- 显而易见这是不显示的，可以自己试一下。
- 提示：这是错误的！！！
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
我就是不显示
- 拿我们要做什么操作呢？
- 这个时候就得用
slot进行操作了 - 在子组件展示内容下添加
- 之后在父组件内子组件内
标签内的信息就会展示了
子组件(son.vue)：
...
{{ msg }}
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
我就是不显示
- 那么我们怎么理解这个
slot呢 - 我们在子组件内增添的新内容，如果没有这个
slot就不会显示。 - 那么我们可不可以理解成我们要展示的内容没地方出去，而
slot就类似于我们新增内容的一个出口 - 并且可以增加
slot
slot默认插槽
- 我们希望子组件的
slot有自己默认的内容 - 那就在子组件内的
slot进行默认值的增添
子组件(son.vue)：
...
{{ msg }}
这是子组件的slot默认值
...
return {
...
name: 'son'
...
msg: '这里是子组件，我有要事跟父组件讲'
}- 那么这个时候父组件内引入了子组件还在子组件内加了内容
- 这种情况，我们在父组件内的传入值就会覆盖子组件
slot内的默认值 - 这就是默认插槽
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
这是我要在子组件内传如的的值
slot具名插槽
- 如果我们在子组件内有不同的插槽，而我们希望显示不同的内容
- 这种情况我们就要给
slot起名字 用一个新的属性
name进行操作
子组件(son.vue)：...{{ msg }}
... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲' } - 我们在子组件内起完名后，我们希望在父组件内找到我们起名的插槽
- 我们就要在子组件范围内增加一个模版标签
- 并且在
内用v-slot对我们起好名字的slot标签高速他叫啥 - 然后就会在其中显示内容了
- 对于
v-slot的语法糖为# - 这就是具名插槽
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
这是子组件的slot默认值1的内容
这是子组件的slot默认值2的内容
这是子组件的slot默认值3的内容
...
return {
...
name: 'father'
...
msg: '这里是父组件'
},
components:{ son }slot作用域插槽
- 我们在子组件内多加个对象，并给他一些值
- 在
slot内对我们新家的对象的值进行展示
子组件(son.vue)：
...
{{ msg }}
{{ someData.name }}
...
return {
...
name: 'son'
...
msg: '这里是子组件，我有要事跟父组件讲',
someData: {
name: 'panda',
job: 'fontEndCoder'
}
}- 了解了默认插槽后，我们知道虽然现在子组件内有一个
slot并进行了赋值展示 - 那么此时我们在父组件进行默认值覆盖是很容易的，如下
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
XXX
...
return {
...
name: 'father'
...
msg: '这里是父组件'
},
components:{ son }- 那么这时候我们希望子组件内已经被父组件覆盖的
someData.name的值 - 我希望用
someData.job再覆盖回来，要怎么搞呢 - 有些人要说了，那直接在父组件内用
someData.job再覆盖就行了。 - ！！！这是不对的，会报错！！！
- 这要怎么办呢
- 我们要给父组件把我们这个定义的对象传给父组件
- 要在子组件
slot进行绑定的操作 - 可以再起一个新名字，只要告诉这个新名字我们定义的对象叫啥就可以了
子组件(son.vue)：
...
{{ msg }}
{{ someData.name }}
...
return {
...
name: 'son'
...
msg: '这里是子组件，我有要事跟父组件讲',
someData: {
name: 'panda',
job: 'fontEndCoder'
}
}- 那么父组件要怎么接受呢
- 仍然是模版标签
- 在其内用
v-slot进行操作赋值 - 这个名字随便起。
- 我们在父组件内起的这个
someDtProp就是我们在子组件内起的someDt内包含的数据！！！！！！！ - 然后在父组件内
{{ someDtProp.someDt.job }}就可以进行这样的操作了 - 就很绕，这就是作用域插槽
为啥？
- 我们父组件是一个作用域
- 我们子组件也是一个作用域
- 我们在父组件拿到子组件内的数据就是进了子组件的作用域
- 这个用的不多
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
{{ someDtProp.someDt.job }}
...
return {
...
name: 'father'
...
msg: '这里是父组件'
},
components:{ son }- 那要是多个插槽怎么办呢
- 我们在子组件我们定义的对象内多加个值
- 并在插槽内起个名字
子组件(son.vue)：
...
{{ msg }}
{{ someData.name }}
{{ someData.job }}
...
return {
...
name: 'son'
...
msg: '这里是子组件，我有要事跟父组件讲',
someData: {
name: 'panda',
job: 'fontEndCoder',
like: 'cola'
}
}- 然后父组件内就得改名把，之前的
default名字改成 - 我们在组件内刚起的名字
- 这就是子组件把值传去覆盖父组件内覆盖子组件的内容
- 的作用域的例子
父组件(father.vue)：
...
import son from './son'
...
{{ msg }}
{{ someDtProp.someDt.like }}
{{ someDtProp.someDt.job }}
...
return {
...
name: 'father'
...
msg: '这里是父组件'
},
components:{ son }