Vue 作用域插槽slot-scope

Posted 胖鹅68

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 作用域插槽slot-scope相关的知识,希望对你有一定的参考价值。

文章目录

一、文章参考

  1. Vue官网 作用域插槽

二、应用场景

组件内部需要同时展示 父组件和子组件的数据,重点:父组件的数据紧紧用于展示,不做其他逻辑处理

使用优点

  1. 子组件如果动态获取数据,不需要传递给子组件
  2. 父组件的数据也不需要通过传递属性的方式将数据给子组件,减少内部逻辑

三、语法案例

  1. 定义具名user插槽,然后在插槽slot控件中传递变量 userInfo
<template>
  <div class>
    <div>
      <div>header</div>
    </div>
    <div>
      <div>
        <slot name="user" :user="userInfo"></slot>
      </div>
    </div>
    <div>
      <div>footer</div>
    </div>
  </div>
</template>

<script>
export default 
  data () 
    return 
      userInfo: 
        name: 'huangbiao',
        age: 110,
        createTime: new Date().getTime()
      
    
  

</script>
  1. 使用插槽组件,在具名插槽上定义插槽的作用域变量slot-scope="slotProps"
<template>
  <div class>
    <MySlotComp>
      <template slot="user" slot-scope="slotProps">
        <div>用户名: slotProps.user.name</div>
        <div>年龄: slotProps.user.age</div>
        <div>创建时间: slotProps.user.createTime</div>
      </template>
    </MySlotComp>
  </div>
</template>

<script>
import MySlotComp from './slot/MySlotComp'
export default 
  components: 
    MySlotComp
  

</script>
  1. 预览效果

以上是关于Vue 作用域插槽slot-scope的主要内容,如果未能解决你的问题,请参考以下文章

Vue 作用域插槽slot slot-scope v-slot

Vue 作用域插槽slot slot-scope v-slot

Vue插槽:slot、slot-scope与指令v-slot使用方法区别讲解

vue - 插槽slot

Vue 教程(二十四)slot 作用域

Vue3 插槽使用详解