在 Vue3 中,props
和 emit
的用法有所改变,主要的变化在于它们现在都通过 setup
函数来访问和使用。
props:
props
用于父组件向子组件传递数据。在 setup
函数中,props
是一个参数,我们可以通过它访问到父组件传入的所有 prop 值。
javascript
<script>
export default {
props: ['message'],
setup(props) {
console.log(props.message) // 输出父组件传入的 message
}
}
</script>
emit:
emit
用于子组件向父组件发送自定义事件。在 setup
函数中,emit
是第二个参数,我们可以使用它来触发自定义事件并传递数据。
javascript
<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 官方文档 进行学习。