Vue 插槽

小岛世界的结局
67 阅读2分钟

一、slot

1.数据流动

数据流向：父->子

父组件调用子组件，在子组件中传入 来自父组件\color{red}{来自父组件} 的数据。 分为匿名插槽和具名插槽两种。写法如下：

image.png

  ※ 具名插槽中，父组件和子组件的`name`是一致的。  
       
  <template slot="myslot"> 内的所有内容都会将传入相应的具名插槽。  
  子组件标签内、<template slot="myslot"> 外 的内容都会被视为匿名插槽。

2.显示结果：

image.png

二、slot-scope

1.数据流动

数据流向：子->父

数据来自子组件，父组件决定如何显示这些数据。
父组件通过slot-scoped自定义一个变量名，便于后续（在父组件作用域中）使用这些数据。

绑定到 <slot> 元素上的属性:  slot props。

父组件

code2.png

子组件

code.png

※ 作用域插槽中，父组件的slot-scope=""和子组件的 :属性名不必一致。

※ 一个子组件的<slot>可以绑定多个slot props ，如：
<slot :data="dataList" :num="numList" :age="ageList">

而父组件只需定义一个接收接口：
<template slot-scoped="myinterface">
在父组件中使用特定的数据，写法为
{{myinterface.data}}
{{myinterface.num}}
{{myinterface.age}}

数据流动

image.png

显示结果

image.png

三、v-slot 统一了以上两种写法

1.具名插槽的v-slot写法

  • 子组件内写法不变

code3.png

  • 父组件

image.png

    ※具名插槽中 v-slot 只能添加在<template>内。  
    换句话说，当数据流向为父→子时，父组件调用子组件时的`v-slot:c`只能写在<template>内    
    匿名插槽默认有一个`default`名称，父组件可以用`v-slot:default`对应

2.作用域插槽的v-slot写法

    <!--旧写法:-->
       <child>
         <template slot-scope="user">     <!--仅改动此处-->
          <div class="tmpl">
            <span v-for="item in user.data">{{item}}</span>
          </div>
        </template>
      </child>   

    <!--新写法-->
     <child>
       <template v-slot:default="user">    <!--新写法-->
         <div class="tmpl">
           <span v-for="item in user.data">{{item}}</span>
         </div>
       </template>
     </child>
   
   <!--在具名插槽中,父组件在调用子组件时，只能在<template>使用 `v-slot`-->
   <!--在作用域插槽中(数据流向：子→父)，父组件调用子组件时 `v-slot`可以直接写在子组件标签内-->
     <child v-slot:default="user">      <!--进一步简化-->   
       <span v-for="item in user.data">{{item}}</span>
     </child>
   
     <child v-slot="user">      <!--当且仅当子组件提供了默认插槽内容时，允许最简化，连 default 参数也可以简化掉-->      
       <span v-for="item in user.data">{{item}}</span>
     </child>

引用

avatar
文章
阅读
粉丝