Vue 作用域插槽slot

Posted 2022-02-09 胖鹅68

文章目录

• 一、文章参考
• 二、应用场景
• • 使用优点
• 三、语法案例

一、文章参考

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>

2. 使用插槽组件，在具名插槽上定义插槽的作用域变量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>

3. 预览效果