vue3中的组件传值的方式

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

<!-- parent.vue -->
<child :msg="message"></child>

<!-- child.vue -->
<p>{
   
   { msg }}</p>

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

子组件使用 props 接收:

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

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

<!-- parent.vue -->
<child @update="updateMessage"></child>

<!-- child.vue --> 
<button @click="emitUpdate">Update</button>

<p>{
   
   { msg }}</p> 

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

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

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

<!-- parent.vue -->
<child ref="child"></child>

<button @click="updateChildMessage">Update Child Message</button>

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

在 child 组件中:

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

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

// parent.vue
provide: {
  name: 'Parent'
}

子组件:

// child.vue
inject: ['name']

console.log(name) // Prints "Parent"

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

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

扫描二维码关注公众号，回复： 15565184 查看本文章

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