vue-slot理解

头像
HUMILITY
    阅读 6 分钟
    1

    vue-slot

    slot基本内容

    • 父组件向子组件传递内容
    • 扩展，复用，定制组件

    • 类型

      • 默认插槽
      • 具名插槽
      • 作用域插槽

    父组件(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有自己默认的内容
    • 那就在子组件内的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具名插槽

    • 如果我们在子组件内有不同的插槽，而我们希望显示不同的内容
    • 这种情况我们就要给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作用域插槽

    • 我们在子组件内多加个对象，并给他一些值
    • 在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前端vue.js
    HUMILITY
    75 声望6 粉丝

    DONT WASTE YOUR TIME

    « 上一篇
    elementUI 开关（switch）组件单击事件及disabled样式问题
    下一篇 »
    js测试代码执行时间

    引用和评论

    推荐阅读
    头像
    关于class类的总结

    HUMILITY阅读 944

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 9阅读 6.3k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 1.8k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.1k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.7k评论 2

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.5k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.4k评论 1

    0 条评论
    得票最新