;
function handleClick() {
message.value = '这是父组件发送给子组件的消息';
}
// value为子组件传递的值
function handleUpdate(value) {
// 重新赋值并渲染到页面中
message.value = value;
}
</script>
子传父
<template>
<div>
<h2>子组件</h2>
<p>父组件传递的消息:{{ message }}</p>
<button @click="handleClick">发送消息给父组件</button>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
// props获取参数名
const props = defineProps({
message: String
});
// emits获取事件名
const emits = defineEmits([
'update:message',
]);
function handleClick() {
// 第一个参数为事件名,第二个参数为传递的值
emits('update:message','这是子组件发送给父组件的消息');
}
</script>
注意事项:
在 Vue 3 中使用 props 和 emit,需要注意以下几点:
-
在使用
props时,需要使用defineProps函数来定义组件的属性列表。这个函数接收一个对象作为参数,其中每个属性都对应了组件的一个属性,并指定了其类型、默认值等信息。同时,需要在组件的选项中声明props选项,将其设置为null,以告诉 Vue 不再使用旧的props语法。 -
在使用
emit时,需要使用defineEmits函数来定义组件的事件列表。这个函数接收一个数组作为参数,其中每个元素都是一个事件名称。在组件的选项中声明emits选项,将其设置为null,以告诉 Vue 不再使用旧的$emit方法。 -
在组件中使用
props和emit时,需要在setup函数中引入getCurrentInstance函数,并从中获取props和emit对象。在模板中使用props时,需要使用解构赋值语法将其解构为单独的变量;在触发事件时,需要使用emit函数并传递事件名称和数据。 -
在使用
props和emit时,需要注意它们是只读的。也就是说,不能在子组件中直接修改props的值,而需要通过向父组件触发事件并传递数据的方式来进行通信。如果需要在子组件中修改数据,应该使用ref或reactive来定义响应式数据,并通过emit函数将修改后的数据传递给父组件进行处理。
总之,在使用 props 和 emit 时,需要了解其在 Vue 3 中的新语法和用法,并遵循最佳实践来编写可维护、可扩展的组件代码。

文章详细介绍了在Vue3中如何使用props和emit进行父子组件之间的通信,包括父传子、子传父的过程,强调了在新版本中定义props和emits的正确方式,以及通信时的注意事项,如props的只读性和通过事件传递数据。

被折叠的 条评论
为什么被折叠?



