vue3中的组件传值的方式

1. props
父组件使用 props 传递数据给子组件:

{{ msg }}

// parent.vuedata() {return {message: 'Hello!'}}

子组件使用 props 接收:

// child.vue props: ['msg']

2. emit 自定义事件
子组件触发事件,父组件监听该事件并更新数据:

 Update
{{ msg }}
 

// parent.vuemethods: {updateMessage(newMsg) {this.message = newMsg}}

// child.vuemethods: {emitUpdate() { this.$emit('update', 'Updated message!')}}

3. refs
通过 ref 给子组件绑定引用,然后通过该引用直接更新子组件的数据或调用子组件的方法:

Update Child Message

// parent.vue methods: {updateChildMessage() {this.$refs.child.msg = 'New message'}}

在 child 组件中:

export default {data() {return {msg: 'Initial message'}}}

4. provide / inject
父组件提供数据,子组件注入并使用:

// parent.vueprovide: {name: 'Parent'}

子组件:

// child.vueinject: ['name']console.log(name) // Prints "Parent"

最后总结一下：Vue 3 中组件传值主要的方式有:

1. props – 父传子
2. emit – 子传父
3. refs – 父访问子
4. provide/inject – 祖先传后代

这些方式可以组合使用,实现非常灵活的组件通信。