vue3中props和emit如何使用

Heartbroken_man

已于 2022-03-02 17:29:43 修改

阅读量1.4k

点赞数

分类专栏： vue3 文章标签： vue.js javascript

于 2022-03-02 17:29:16 首次发布

本文链接：https://blog.youkuaiyun.com/Heartbroken_man/article/details/123235179

版权

vue3 专栏收录该内容

1 篇文章

订阅专栏

Vue3引入了setup函数，使得组件实现支持函数式编程。在使用setup时，props和emit的声明发生了变化，需要通过`defineProps`和`defineEmits`API进行声明。对于typescript用户，定义props的默认值可以借助`withDefaults`。

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

在vue3中使用setup新增这个特性可以使用函数式编程，在 <script setup> 中必须使用 defineProps 和 defineEmits API来声明 props 和 emits

<template>
  <div>
    <p @click="changeFn($event)">{{ foo }}</p>
  </div>
</template>
<script setup>
import { defineEmits, defineProps } from "vue";
const emit = defineEmits(["change"]);//需要“注册”事件名
defineProps({
  foo: {
    type: String,
    default: () => {
      return "hello自定义组件";
    },
  },
});
function changeFn(event) {
  emit("change", event);//这里去emit事件和传递参数
}
</script>

typescript写法：

<template>
  <div>
    <p @click="changeFn($event)">{{ foo }}</p>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps, withDefaults } from "vue";
interface Props {
  foo: string;
}
interface Emit {
  (e: "change", event?: MouseEvent): void;
}
const emit = defineEmits<Emit>();
const props = withDefaults(defineProps<Props>(), {
  foo: "hello自定义组件",
});
function changeFn(event: MouseEvent) {
  emit("change", event);
}
</script>

这里如果需要定义props的默认值需要withDefaults去定义