vue-slot理解 vue-slot理解

vue-slot slot基本内容

父组件向子组件传递内容
扩展，复用，定制组件
类型
- 默认插槽
- 具名插槽
- 作用域插槽

父组件(father.vue)：

...{{ msg }} ... return { ... name: 'father' ... msg: '这里是父组件' }

子组件(son.vue)：

...{{ msg }} ... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲' }

首先将子组件的内容放到父组件，怎么放呢？
1. 首先要在父组件将子组件进行引入并注册
2. 在显示部分使用如下
3. 在此时此刻父组件内除了本身显示的内容外，也会显示子组件的内容

父组件(father.vue)：

... import son from './son' ...{{ msg }} ... return { ... name: 'father' ... msg: '这里是父组件' }, components:{ son }

我们知道这玩意是父组件 ---> 子组件传值，想在子组件内再显示一些信息，那么怎么传值呢？
有些人可能要想了是不是这样（比如我们传一句：’我就是不显示‘）
在内加我就是不显示
- 我就是不显示
显而易见这是不显示的，可以自己试一下。
提示：这是错误的！！！

父组件(father.vue)：

... import son from './son' ...{{ msg }} 我就是不显示 ... return { ... name: 'father' ... msg: '这里是父组件' }, components:{ son }

拿我们要做什么操作呢？
这个时候就得用slot进行操作了
在子组件展示内容下添加
之后在父组件内子组件内标签内的信息就会展示了

子组件(son.vue)：

...{{ msg }} ... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲' }

父组件(father.vue)：

... import son from './son' ...{{ msg }} 我就是不显示 ... return { ... name: 'father' ... msg: '这里是父组件' }, components:{ son }

那么我们怎么理解这个slot呢
我们在子组件内增添的新内容，如果没有这个slot就不会显示。
那么我们可不可以理解成我们要展示的内容没地方出去，而slot就类似于我们新增内容的一个出口
并且可以增加slot

slot默认插槽

我们希望子组件的slot有自己默认的内容
那就在子组件内的slot进行默认值的增添

子组件(son.vue)：

...{{ msg }} 这是子组件的slot默认值 ... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲' }

那么这个时候父组件内引入了子组件还在子组件内加了内容
这种情况，我们在父组件内的传入值就会覆盖子组件slot内的默认值
这就是默认插槽

父组件(father.vue)：

... import son from './son' ...{{ msg }} 这是我要在子组件内传如的的值 ... return { ... name: 'father' ... msg: '这里是父组件' }, components:{ son }

slot具名插槽

如果我们在子组件内有不同的插槽，而我们希望显示不同的内容
这种情况我们就要给slot起名字
用一个新的属性name进行操作
子组件(son.vue)：

...{{ msg }} ... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲' }
我们在子组件内起完名后，我们希望在父组件内找到我们起名的插槽
我们就要在子组件范围内增加一个模版标签
并且在内用v-slot对我们起好名字的slot标签高速他叫啥
然后就会在其中显示内容了
对于v-slot的语法糖为#
这就是具名插槽

父组件(father.vue)：

... import son from './son' ...{{ msg }} ... 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 }} ... return { ... name: 'father' ... msg: '这里是父组件' }, components:{ son }

那要是多个插槽怎么办呢
我们在子组件我们定义的对象内多加个值
并在插槽内起个名字

子组件(son.vue)：

...{{ msg }} {{ someData.name }} {{ someData.job }} ... return { ... name: 'son' ... msg: '这里是子组件，我有要事跟父组件讲', someData: { name: 'panda', job: 'fontEndCoder', like: 'cola' } }