vue3 setup函数 有哪些参数,props、{attrs,slots,emit}等

在 Vue 3 中，setup 函数是 Composition API 的入口点，用于替代传统的 data、methods、computed 等选项。setup 函数可以接收两个参数：props 和 context。下面详细解释这两个参数及其用途。

setup 函数签名

import { SetupContext } from 'vue';

export default {
  props: {
    // 定义组件的 props
  },
  setup(props: {}, context: SetupContext) {
    // 在这里使用 props 和 context
  }
};

参数详解

1. props

props 是一个对象，包含了传递给组件的所有属性（props）。这些属性可以在 setup 函数中直接使用，并且它们是响应式的（reactive）。

• 类型：根据你在组件中定义的 props 类型来确定。

• 示例：

  export default {
    props: {
      message: String,
      count: Number
    },
    setup(props) {
      console.log(props.message); // 输出传递给组件的 message prop
      console.log(props.count);   // 输出传递给组件的 count prop
    }
  };
  

• 注意事项：

  • props 是只读的，不能直接修改。
  • 如果需要对 props 进行转换或派生新的值，可以使用 computed 或者其他响应式机制。

2. context

context 是一个包含组件上下文信息的对象。它提供了几个有用的属性和方法，帮助你更好地管理组件的行为。

• 类型：SetupContext

• 属性：

  • attrs：包含所有未声明为 props 的属性（即 $attrs），通常用于非 props 的 DOM 属性。
  • slots：包含插槽内容，类似于 this.$slots。
  • emit：一个函数，用于触发自定义事件，类似于 this.$emit。

• 示例：

  export default {
    props: {
      title: String
    },
    setup(props, context) {
      // 访问 attrs
      console.log(context.attrs.class); // 输出传递给组件但未声明为 props 的 class 属性
  
      // 访问 slots
      const defaultSlot = context.slots.default ? context.slots.default() : null;
      console.log(defaultSlot); // 输出默认插槽的内容
  
      // 触发自定义事件
      context.emit('customEvent', 'some data');
    }
  };
  

完整示例

以下是一个完整的示例，展示了如何在 setup 函数中使用 props 和 context：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click Me</button>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    // 使用 props
    console.log('Message:', props.message);

    // 使用 context
    console.log('Attrs:', context.attrs);
    console.log('Slots:', context.slots.default ? context.slots.default() : null);

    // 创建一个响应式变量
    const count = ref(0);

    // 定义一个事件处理函数
    const handleClick = () => {
      count.value++;
      context.emit('increment', count.value);
    };

    return {
      handleClick,
      count
    };
  }
});
</script>

总结

• props：包含传递给组件的所有属性，是响应式的并且只读。
• context：包含组件的上下文信息，包括 attrs、slots 和 emit 方法。

通过理解并合理使用 setup 函数的这两个参数，你可以更灵活地管理组件的状态、属性和事件，从而编写出更加模块化和可维护的代码。