vue3 setup 函数参数

在 Vue 3 中，我们可以使用新的 setup 函数来代替之前的 created、mounted、updated、destroyed 等钩子函数。setup 函数是一个新的组件选项，在组件被创建时执行。

setup 函数接受两个参数：props 和 context。

props 参数

props 参数接收当前组件接收的属性值，和之前的组件一样，我们可以使用 props 配置项来声明需要接收的属性。

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.message);  // 输出组件传入的 message 属性值
  }
}

在 setup 函数内部，我们可以使用参数 props 来访问当前组件接收到的所有 props。props 参数是一个响应式对象，也就是说当组件传入的属性值改变时，props 内部对应的属性也会发生变化。

context 参数

context 参数是一个包含了一些常用模块/函数的对象，可以用来构建组件实例。

export default {
  setup(props, context) {
    const { emit } = context;
    return {
      handleClick() {
        emit('click', 'some data'); // 触发事件 'click'，并传递数据
      }
    }
  }
}

在上述的例子中，我们通过解构 context 对象来获取了其中的 emit 函数，用于在组件实例中触发事件。除了 emit 函数，context 对象还提供了一些其他属性和函数：

• attrs: 包含了组件实例接收到的非 props 属性
• slots: 包含了插槽内容，在 template 中可以用 v-slot 指令来使用插槽。
• emit: 用于触发自定义事件的函数。
• expose: 用于将一些可能对外暴露的实例属性放到一个响应式对象中。

综上所述，setup 函数是 Vue 3 中一个相对重要的新特性。通过使用 setup 函数，可以更加方便地管理组件。通过 props 参数和 context 参数，可以轻松获取组件传入的属性和构建组件实例。