vue3中props和emit如何使用

原创已于 2022-03-02 17:29:43 修改 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

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

vue3 专栏收录该内容

1 篇文章

订阅专栏

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

在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去定义