Vue 插槽的理解与基础应用

目录

前言

使用插槽的意义

适用于的可优化场景

一. 具名插槽

示例

子组件 phone-call-common.vue

父组件 dial.vue

二. 作用域插槽

示例

子组件 current-user.vue

父组件一 example-one.vue

父组件二 example-two.vue

父组件三 example-three.vue

三. 解构插槽Prop

示例

子组件 current-user.vue

父组件一 example-one.vue

父组件二 example-two.vue

父组件三 example-three.vue

四. 动态插槽名

示例

子组件 current-user.vue

父组件 example-one.vue

---

前言

使用插槽的意义

1. 有效提高代码复用率。

2. 有效提高开发程序和维护程序的效率。

适用于的可优化场景

1. 多个页面组件或逻辑组件里复用了可提取为一个单独组件的代码块，但是对于不同的组件，该代码块中有小的区域里展示的信息内容或形式存在差异。

一. 具名插槽

示例

子组件 phone-call-common.vue

 <template>
    <view>
        <slot name="aaa"></slot>
        <text>333</text>
        <slot></slot>
        <slot name="bbb"></slot>
    </view>
</template>

父组件 dial.vue

<phone-call-common>
    <template v-slot:aaa>111</template>
    <template v-slot:bbb>222</template>
    <template >444</template>
    <template >555</template>
</phone-call-common>

        显示结果为111333444555222。可以把插槽理解为一个口袋，能够装下所有给它的东西。
    
        解析上例：
        (1). 子组件中预留的插槽标签是，可以使用name属性指定插槽名称，默认为default。父组件中使用子组件时，可以通过v-slot指定将子组件标签对中的内容展示在子组件的哪个插槽内。
        (2). Vue 2.6.0版本给v-slot:设置了缩写#，因此上例中v-slot:可简写为#，例如上例的可简写为，注意#后面必须跟参数，例如#default不能简写为#。
        (3). 就组件层面而言，dial.vue里使用了phone-call-common.vue，dial.vue对于phone-call-common.vue而言是父组件，phone-call-common.vue对于dial.vue而言是子组件。不要因为父组件里使用了子组件内部设置好的插槽，就颠倒了父组件和子组件的指向认知。就像A包含B，B包含C，可以说A中的C被B包含，但不可以说A被B包含。
        (4). 对于方法的调用，注意作用域即可。可参考Vue子组件和父组件中调用对方定义的方法的实现形式。

二. 作用域插槽

示例

        展示效果，让父组件能够使用子组件里定义的变量，并控制插槽展示的内容。

子组件 current-user.vue

...
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
...
data(){
    user:{
        firstName:'A',
        lastName:'b',
    }
}
...

父组件一 example-one.vue

...
 
<current-user>
 
  {{ user.firstName }}
 
current-user>
 
...

父组件二 example-two.vue

...
 
<current-user>
 
    <template v-slot:default="slotProps">
 
        {{ slotProps.user.firstName }}
 
        在example-two.vue中，将包含所有插槽prop的对象命名为了slotProps【也可以起别的名字】，然后通过该对象调用子组件current-user中定义的变量。
 
    </template>
 
</current-user>
 
...

父组件三 example-three.vue
 

...
 
<current-user v-slot:default="slotProps">
 
    {{ slotProps.user.firstName }}
 
    因为子组件current-user.vue只有一个默认插槽，所以可以直接将v-slot:default="slotProps"写在子组件标签<current-user>里。此时v-slot:default="slotProps"还可简写为v-slot="slotProps"。
 
    如果子组件current-user里的插槽不止一个【还有具名插槽】，那么就不能将v-slot:default="slotProps"直接写在子组件标签<current-user>里。
 
</current-user>
 
...

三. 解构插槽Prop

        作用域插槽的内部工作原理是将插槽内容包裹在一个拥有单个参数的函数里，如下：

function (slotProps){
    // 插槽内容。
}

        所以，可以使用ES6【ES2015】语法解构slotProps中的变量，还可以给变量另起名字和赋默认值。

示例

子组件 current-user.vue

...
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
...
data(){
    return {
        user:{
            firstName:'A',
            lastName:'b',
        },
        msg:"123",
    }
}
...

父组件一 example-one.vue

...
<current-user v-slot="{user,msg}">
    {{ user.firstName }}
    {{ msg }}
    解构获取子组件current-user里的user和msg属性，然后就可以使用子组件current-user中它们的值。
current-user>
...

父组件二 example-two.vue

...
<current-user v-slot="{user:person,msg}">
    {{ person.firstName }}
    {{ msg }}
    解构获取子组件current-user里的user和msg属性，并在父组件example-two.vue的插槽作用域里将子组件current-user里的user属性重命名为person。
current-user>
...

父组件三 example-three.vue

...
<current-user v-slot="{user = {firstName:'default name'}}">
    {{ user.firstName }}
    解构获取子组件current-user里的user属性，并在父组件example-two.vue的插槽作用域里设置子组件current-user里的user属性默认值。因此如果子组件current-user里的user属性的属性值未定义【undefined】时，会使用设置的属性默认值{firstName:'default name'}。
</current-user>
...

四. 动态插槽名

        Vue 2.6.0版本给v-slot指令新增了动态指令参数，可用来定义动态的插槽名。

示例

子组件 current-user.vue

...
<template>
    <slot v-bind:user="userInfo">样式内容一：{{msg}}</slot>
    <slot v-bind:user1="userInfo" name="one">样式内容二</slot>
    <slot v-bind:user2="userInfo" name="two">样式内容三</slot>
    <slot v-bind:user3="userInfo" name="three">样式内容四</slot>
</template>
...
data(){
    return {
        msg:'',
        userInfo:{
            fisrtName:'A',
            lastName:'b',
        }
    }
}
...

父组件 example-one.vue

...
<current-user>
    <template v-slot:default="">Hello</template>
    <template v-slot:[dynamicSlotName]="slotProps">
        {{ slotProps.user2.firstName }}
        上面的user2也可以替换为其它current-user里声明的prop。
    </template>
</current-user>
...
data(){
    return {
        dynamicSlotName:"three",
    }
}
...