在Vue3中,组件传值可以通过props属性实现。
首先,在父组件中定义props属性,然后将数据传递给子组件。
// Parent.vue
<template><Child :message="message" />
</template><script>
import Child from './Child.vue';export default {data() {return {message: 'Hello Vue3'}},components: {Child}
}
</script>
然后,在子组件中接收父组件传递的props属性。
// Child.vue
<template><div>{{ message }}</div>
</template><script>
export default {props: ['message']
}
</script>
以上代码实现了父组件向子组件传递message属性,并在子组件中使用。
注意:在Vue3中,需要使用:
来绑定props属性,且子组件中不再需要使用this
来访问props属性,可以直接使用。另外,在子组件中也可以使用v-model
来实现双向数据绑定。