Vue3中setup参数attrs, slots, emit实例分析

Vue3 引入了 Composition API，其中 setup 函数是 Composition API 的核心部分。setup 函数在组件实例创建之前执行，它接收两个参数：props 和 context。context 是一个包含 attrs、slots 和 emit 的对象。本文将深入分析 setup 函数中的 attrs、slots 和 emit，并通过实例演示它们的使用。

1. setup 函数概述

在 Vue3 中，setup 函数是 Composition API 的入口点。它接收两个参数：

• props：组件的 props 对象。
• context：一个包含 attrs、slots 和 emit 的对象。

setup 函数返回一个对象，该对象的属性将被暴露给模板使用。

export default {
  setup(props, context) {
    // 在这里可以使用 props 和 context
    return {
      // 暴露给模板的属性
    };
  },
};

2. attrs 的使用

attrs 是一个包含所有非 prop 的 attribute 的对象。这些 attribute 包括 class、style 以及任何未在 props 中声明的 attribute。

2.1 基本用法

假设我们有一个组件 MyComponent，它接收一个 title prop，并且我们还传递了一些其他的 attribute：

<MyComponent title="Hello" class="my-class" data-id="123" />

在 setup 函数中，我们可以通过 context.attrs 访问这些非 prop 的 attribute：

export default {
  setup(props, { attrs }) {
    console.log(attrs.class); // 输出: "my-class"
    console.log(attrs['data-id']); // 输出: "123"

    return {
      // 暴露给模板的属性
    };
  },
};

2.2 在模板中使用 attrs

我们可以将 attrs 传递给子组件，或者在模板中直接使用它们：

export default {
  setup(props, { attrs }) {
    return {
      attrs,
    };
  },
};

在模板中：

<template>
  <div v-bind="attrs">
    <!-- 这里可以使用 attrs 中的所有 attribute -->
  </div>
</template>

2.3 注意事项

• attrs 是响应式的，因此当父组件更新 attribute 时，attrs 会自动更新。
• attrs 不包含在 props 中声明的属性。

3. slots 的使用

slots 是一个包含所有插槽内容的对象。通过 slots，我们可以在 setup 函数中访问和操作插槽内容。

3.1 基本用法

假设我们有一个组件 MyComponent，它包含一个默认插槽和一个具名插槽：

<MyComponent>
  <template v-slot:default>
    <p>Default Slot Content</p>
  </template>
  <template v-slot:footer>
    <p>Footer Slot Content</p>
  </template>
</MyComponent>

在 setup 函数中，我们可以通过 context.slots 访问这些插槽：

export default {
  setup(props, { slots }) {
    console.log(slots.default()); // 输出: [VNode]
    console.log(slots.footer()); // 输出: [VNode]

    return {
      // 暴露给模板的属性
    };
  },
};

3.2 在模板中使用 slots

我们可以将 slots 传递给子组件，或者在模板中直接使用它们：

export default {
  setup(props, { slots }) {
    return {
      slots,
    };
  },
};

在模板中：

<template>
  <div>
    <slot name="default"></slot>
    <slot name="footer"></slot>
  </div>
</template>

3.3 动态插槽

我们还可以动态地渲染插槽内容：

export default {
  setup(props, { slots }) {
    const slotName = ref('default');

    return {
      slotName,
      slots,
    };
  },
};

在模板中：

<template>
  <div>
    <component :is="slots[slotName]" />
  </div>
</template>

3.4 注意事项

• slots 是响应式的，因此当父组件更新插槽内容时，slots 会自动更新。
• slots 中的每个插槽都是一个函数，调用该函数会返回一个 VNode 数组。

4. emit 的使用

emit 是一个用于触发自定义事件的函数。通过 emit，我们可以在子组件中触发事件，并在父组件中监听这些事件。

4.1 基本用法

假设我们有一个组件 MyComponent，它包含一个按钮，点击按钮时触发一个自定义事件 click：

<MyComponent @click="handleClick" />

在 setup 函数中，我们可以通过 context.emit 触发这个事件：

export default {
  setup(props, { emit }) {
    const handleClick = () => {
      emit('click', 'Hello from MyComponent');
    };

    return {
      handleClick,
    };
  },
};

在父组件中，我们可以监听这个事件：

export default {
  methods: {
    handleClick(message) {
      console.log(message); // 输出: "Hello from MyComponent"
    },
  },
};

4.2 在模板中使用 emit

我们可以在模板中直接使用 emit：

export default {
  setup(props, { emit }) {
    return {
      emit,
    };
  },
};

在模板中：

<template>
  <button @click="emit('click', 'Hello from MyComponent')">Click Me</button>
</template>

4.3 注意事项

• emit 是响应式的，因此当父组件更新事件处理函数时，emit 会自动更新。
• emit 的第一个参数是事件名称，后续参数是传递给事件处理函数的参数。

5. 综合实例

下面是一个综合使用 attrs、slots 和 emit 的实例：

export default {
  setup(props, { attrs, slots, emit }) {
    const handleClick = () => {
      emit('click', 'Hello from MyComponent');
    };

    return {
      attrs,
      slots,
      handleClick,
    };
  },
};

在模板中：

<template>
  <div v-bind="attrs">
    <slot name="default"></slot>
    <button @click="handleClick">Click Me</button>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中使用：

<MyComponent class="my-class" @click="handleClick">
  <template v-slot:default>
    <p>Default Slot Content</p>
  </template>
  <template v-slot:footer>
    <p>Footer Slot Content</p>
  </template>
</MyComponent>

6. 总结

在 Vue3 的 setup 函数中，attrs、slots 和 emit 是非常有用的工具。通过它们，我们可以访问非 prop 的 attribute、操作插槽内容以及触发自定义事件。掌握这些工具的使用，可以帮助我们更好地构建灵活且可复用的组件。

希望本文对你理解 Vue3 中的 setup 参数有所帮助。如果你有任何问题或建议，欢迎在评论区留言讨论。