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 }