Vue3 作用域插槽

DevCsdner

已于 2022-09-19 23:15:57 修改

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript ecmascript

于 2022-09-19 23:07:49 首次发布

本文链接：https://blog.youkuaiyun.com/smartboy_01/article/details/126943969

本文介绍了Vue3中如何使用作用域插槽来封装组件，通过作用域插槽将组件内部数据传递给调用者，实现自定义渲染。以MyTable组件为例，展示了如何定义和使用作用域插槽，以及如何在根组件中调用并传入数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 作用域插槽

在封装组件的过程中，可以为预留的 <slot> 插槽绑定 props 数据，这种带有 props 数据的<slot>叫做作用域插槽。通过作用域插槽，把组件数据返回给，组件调用方。

MyTest组件

<template>
  <div>
    <h3>这是 TEST 组件</h3>
    <slot :info="infomation" :msg="message"></slot>
  </div>
</template>

<script>
export default {
     
  name: 'MyTest',
  data() {
     
    return {
     
      // 信息数据
      infomation: {
     
        phone: '138xxxx6666',
        address: '中国北京',
      },
      message: 'abc'
    }
  },
}
</script>

组件调用者

<template>
  <div>
    <h1>App 根组件</h1>
    <hr />

    <!-- 使用自定义组件 -->
    <my-test>
      <!-- 直接解构组件MyTest 返回的数据-->
      <template #default="{ msg, info }">
        <p>{
  { msg }}</p>
        <p>{
  { info.address }}</p>
      </template>
    </my-test>
    <hr />

    <my-table>
      <template #default="{ user }">
        <td>{
  { user.id }}</td>
        <td>{
  { user.name }}</td>
        <td>
          <input type="checkbox" :checked="user.state" />
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
// 导入组件
import MyTest from './MyTest.vue'

export default {
     
  name

最低0.47元/天解锁文章