关于javascript:vueslot理解

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

父组件(father.vue)：

<!-- vue template 默认已写好，且同级目录，以下仅展现要害局部 -->
<!-- 父组件 -->
...
<p>{{msg}}</p>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
}

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲'
}

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

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
<!-- 引入子组件 -->
import son from './son'
...
<p>{{msg}}</p>
<son></son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
<!-- 注册子组件 -->
components:{son}

咱们晓得这玩意是父组件 —> 子组件传值，想在子组件内再显示一些信息，那么怎么传值呢？
有些人可能要想了是不是这样（比方咱们传一句：’我就是不显示‘）
在 <son></son> 内加<p> 我就是不显示 </p>
- <son><p> 我就是不显示 </p></son>
不言而喻这是 不显示 的，能够本人试一下。
提醒：这是谬误的！！！

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<!-- 这样是不会显示的！！这是谬误的 -->
<son><p> 我就是不显示 </p></son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

那咱们要做什么操作呢？
这个时候就得用 slot 进行操作了
在子组件展现内容下增加<slot></slot>
之后在父组件内子组件内 <p></p> 标签内的信息就会展现了

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<!-- 在子组件内加完 `slot` 后父组件才会显示 -->
<slot></slot>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲'
}

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<!-- 这个时候才会显示 -->
<son><p> 我就是不显示 </p></son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

那么咱们怎么了解这个 slot 呢
咱们在子组件内削减的新内容，如果没有这个 slot 就不会显示。
那么咱们可不可以了解成咱们要展现的内容没中央进来，而 slot 就相似于咱们新增内容的一个进口
并且能够减少slot

咱们心愿子组件的 slot 有本人默认的内容
那就在子组件内的 slot 进行默认值的削减

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<slot> 这是子组件的 slot 默认值 </slot>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲'
}

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

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<!-- 这里会笼罩子组件内 `slot` 的默认值 -->
<son><p> 这是我要在子组件内传如的的值 </p></son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

如果咱们在子组件内有不同的插槽，而咱们心愿显示不同的内容
这种状况咱们就要给 slot 起名字

用一个新的属性 name 进行操作
子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<!-- 别离对三个 `slot` 起了三个名字。-->
<slot name=‘default1’></slot>
<slot name=‘default2’></slot>
<slot name=‘default3’></slot>
...
return {
  ...
  name: 'son'
  ...
  msg: '这里是子组件，我有要事跟父组件讲'
}

咱们在子组件内起完名后，咱们心愿在父组件内找到咱们起名的插槽
咱们就要在子组件范畴内减少一个模版标签<template></template>
并且在 <template></template> 内用 v-slot 对咱们起好名字的 slot 标签通知他叫啥
而后就会在其中显示内容了
对于 v-slot 的语法糖为#
这就是具名插槽

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<son>
<!-- 在模版标签内要通知咱们在子组件内起的名字 -->
  <template v-slot:default1>
    <p> 这是子组件的 slot 默认值 1 的内容 </p>
  </template>
  <template v-slot:default2>
    <p> 这是子组件的 slot 默认值 2 的内容 </p>
  </template>
  <template v-slot:default3>
    <p> 这是子组件的 slot 默认值 3 的内容 </p>
  </template>
</son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

咱们在子组件内多加个对象，并给他一些值
在 slot 内对咱们新家的对象的值进行展现

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<slot>{{someData.name}}</slot>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲',
    <!-- 咱们在子组件内新加对象并给一些值 -->
    someData: {
        name: 'panda',
        job: 'fontEndCoder'
    }
}

理解了默认插槽后，咱们晓得尽管当初子组件内有一个 slot 并进行了赋值展现
那么此时咱们在父组件进行默认值笼罩是很容易的，如下

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<!-- 会笼罩掉子组件给的默认值 -->
<son>XXX</son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

那么这时候咱们心愿子组件内曾经被父组件笼罩的 someData.name 的值
我心愿用 someData.job 再笼罩回来，要怎么搞呢
有些人要说了，那间接在父组件内用 someData.job 再笼罩就行了。
！！！这是不对的，会报错！！！
这要怎么办呢
咱们要给父组件把咱们这个定义的对象传给父组件
要在子组件 slot 进行绑定的操作
能够再起一个新名字，只有通知这个新名字咱们定义的对象叫啥就能够了

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<!-- 将咱们写好的对象 `someData` 赋值给 `someDt` -->
<slot v-bind: someDt="someData">{{someData.name}}</slot>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲',
    someData: {
        name: 'panda',
        job: 'fontEndCoder'
    }
}

那么父组件要怎么承受呢
依然是模版标签<template></template>
在其内用v-slot 进行操作赋值
这个名字轻易起。
咱们在父组件内起的这个 someDtProp 就是咱们在子组件内起的 someDt 内蕴含的数据！！！！！！！
而后在父组件内 {{someDtProp.someDt.job}}就能够进行这样的操作了
就很绕，这就是作用域插槽
为啥？
- 咱们父组件是一个作用域
- 咱们子组件也是一个作用域
- 咱们在父组件拿到子组件内的数据就是进了子组件的作用域
- 这个用的不多

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<son>
<!-- 咱们在父组件起的 `someDtProp` 内有子组件 `someDt` 内的咱们写的对象 `someData` 的数据 -->
  <template v-slot:default='someDtProp'>
    {{someDtProp.someDt.job}}
  </template>
</son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

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

子组件(son.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 子组件 -->
...
<p>{{msg}}</p>
<!-- 起个名字 -->
<slot v-bind: someDt="someData" name='likeDk'>{{someData.name}}</slot>
<slot v-bind: someDt="someData" name='likeJob'>{{someData.job}}</slot>
...
return {
    ...
    name: 'son'
    ...
    msg: '这里是子组件，我有要事跟父组件讲',
    someData: {
        name: 'panda',
        job: 'fontEndCoder',
        like: 'cola'
    }
}

而后父组件内就得改名把，之前的 default 名字改成
咱们在组件内刚起的名字
这就是子组件把值传去笼罩父组件内笼罩子组件的内容
的作用域的例子

父组件(father.vue)：

<!-- vue template 默认已写好，仅展现要害局部 -->
<!-- 父组件 -->
...
import son from './son'
...
<p>{{msg}}</p>
<son>
<!-- 改名改名 -->
  <template v-slot:likeDk='someDtProp'>
    {{someDtProp.someDt.like}}
  </template>
  <template v-slot:likeJob='someDtProp'>
    {{someDtProp.someDt.job}}
  </template>
</son>
...
return {
    ...
    name: 'father'
    ...
    msg: '这里是父组件'
},
components:{son}

关于javascript:vueslot理解

vue-slot

slot 根本内容

slot 默认插槽

slot 具名插槽

slot 作用域插槽

Just My Socks（注册教程内含优惠码）

关于javascript:vueslot理解

vue-slot

slot 根本内容

slot 默认插槽

slot 具名插槽

slot 作用域插槽

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）