Vue3 中 props 与 emit 用法

本文主要是介绍Vue3 中 props 与 emit 用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在 Vue3 中，props 和 emit 的用法有所改变，主要的变化在于它们现在都通过 setup 函数来访问和使用。

props:
props 用于父组件向子组件传递数据。在 setup 函数中，props 是一个参数，我们可以通过它访问到父组件传入的所有 prop 值。

<script>
export default {props: ['message'],setup(props) {console.log(props.message) // 输出父组件传入的 message}
}
</script>

emit:
emit 用于子组件向父组件发送自定义事件。在 setup 函数中，emit 是第二个参数，我们可以使用它来触发自定义事件并传递数据。

<script>
export default {setup(props, { emit }) {const onClick = () => {emit('click', 'Hello, parent')}return { onClick }}
}
</script>

在这个示例中，当点击事件触发时，子组件会通过 emit 发送一个名为 ‘click’ 的事件，并传递一个 ‘Hello, parent’ 的数据给父组件。父组件可以通过 v-on:click="handler" 或 @click="handler" 来监听这个事件。

以上是 Vue3 中 props 和 emit 的基本用法，更多的功能和详情，你可以查阅 Vue 官方文档 和 Vue 官方文档 进行学习。

这篇关于Vue3 中 props 与 emit 用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---