Vue3中的SetupContext函数详解：掌握Vue3组件API

随着Vue3的推出，前端开发者对于该版本中新增的API、功能以及性能提升都非常关注。其中，SetupContext函数是Vue3中重要的组件API之一。本文将为大家详细解析SetupContext函数，并结合实例让大家更好地理解其使用方法。

一、什么是SetupContext函数？

在Vue3中，组件的数据、方法等都需要通过props或者向下传递context进行访问，而这些内容都保存在SetupContext函数中。
值得注意的是，Context只在当前组件中有效，而对于其所嵌套的组件则无效。

二、SetupContext函数的参数

在调用SetupContext函数之前，我们需要定义组件的prop以及emits。以父组件为例：

// 父组件
<template>
  <ChildComponent v-bind:message="message" v-bind:func="logMessage" />
</template>

<script>
  import ChildComponent from "./ChildComponent.vue";

  export default {
    components: {
      ChildComponent,
    },
    data() {
      return {
        message: "Hello Vue3",
      };
    },
    methods: {
      logMessage() {
        console.log(this.message);
      },
    },
  };
</script>

在此基础上，我们需要定义ChildComponent组件的prop以及emits，在ChildComponent.vue中：

// ChildComponent组件
<script>
  export default {
    props: {
      message: String,
    },
    emits: ["custom-event"],
    setup(props, context) {
      // ...
    },
    methods: {
      handleClick() {
        this.$emit("custom-event");
      },
    },
  };
</script>

其中，SetupContext函数一般传入两个参数:

• props：即父组件传递到该组件中的props，可以通过props.xxx访问。
• context：该组件的上下文，包括emit，attrs，slots等内容。

三、通过SetupContext访问上下文内容

1. 访问emit
   通过emit可以向父组件派发事件。在上面的代码中，我们已经在ChildComponent.vue中定义了emits，现在我们可以通过context.emit来访问这个函数。同时，通过context.emit触发的事件是可以被父组件监听到的。

<script>
export default {
  props: {
    message: String,
  },
  emits: ["custom-event"],
  setup(props, context) {
    const handleClick = () => {
      context.emit("custom-event");
    };
    return {
      handleClick,
    };
  },
};
</script>

在上述代码中，我们定义了一个handleClick函数，当点击按钮时，通过context.emit将custom-event事件派发到父组件中，触发父组件中监听该事件的处理函数。

2. 访问slots

在Vue2.x中，作用域插槽和父组件向子组件传递内容基本上都是通过this.$slots.xxx和this.$scopedSlots.xxx来实现的。在Vue3中，这些内容都可以通过SetupContext中的slots来访问。

parent.vue

<template>
  <div>
    <child>
      <template v-slot:default="{ message }">{{ message }}</template>
    </child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "parent",
  components: { Child },
};
</script>

child.vue

<template>
  <div>
    <slot :message="message" />
    // 还可以使用
    <!-- <template v-slot:default="slotProps">
        {{ slotProps.message }}
      </template> -->
  </div>
</template>

<script>
export default {
  name: "child",
  setup(props, context) {
    const { slots } = context;
    const message = "Hello Vue3";
    return {
      message,
      slots,
    };
  },
};
</script>

在ChildComponent.vue的setup中，我们除了可以通过props和context访问之外，还可以通过context.slots来访问父组件传递到该组件中的插槽内容。

在上述代码中，我们将父组件传递到该组件中的插槽内容通过slotProps.message的方式传递到子组件中，最终输出的内容为："Hello Vue3"。

3. 访问attrs

在Vue3中，$vnode.data.attrs已经被废弃了，代替的是context.attrs。在该组件的setup中，我们可以通过context.attrs来访问app.vue中传递到该组件的所有属性。

childComponent.vue

<template>
  <div>
    <input :value="inputValue" @input="handleChange" />
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {},
  emits: ["update:value"],
  setup(props, context) {
    const { attrs } = context;
    const inputValue = attrs.defaultValue ?? "";
    const handleChange = (e) => {
      context.emit("update:value", e.target.value);
    };
    return {
      inputValue,
      handleChange,
    };
  },
};
</script>

在上述代码中，我们通过context.attrs来获取app.vue中绑定在ChildComponent组件上的defaultValue属性，并将其赋值给inputValue。当然，也可以通过item = {...attrs}来获取app.vue中传递到该组件的所有属性。

四、总结

SetupContext函数在Vue3中扮演着非常重要的角色。它不仅保存了组件中的props、emits、slots、attrs等所有信息，还通过context来进行对应的访问操作。希望通过本文，大家能够更加深入理解SetupContext函数的使用方法。