Vue3组件传参攻略：玩转父组件与子组件交互

2023-01-25 16:38:07

组件交互：Vue3 中的传值之道

在构建复杂的用户界面时，组件是 Vue3 的基石。然而，组件之间的交互需要有效地传递数据。本文将深入探讨 Vue3 中组件传值的多种方法，包括 props、emit、双向绑定、依赖注入以及子传父和父传子。

一、props：父向子传递数据

props 是父组件向子组件传递数据的首选方式。它本质上是一个对象，其属性名与子组件模板中使用的属性名相对应。在父组件中，通过 v-bind 指令将数据绑定到 props 属性；在子组件中，通过 props 选项接收数据。

<!-- 父组件 -->
<template>
  <ChildComponent :message="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Vue3!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

二、emit：子向父传递数据

emit 是子组件向父组件传递数据的机制。它允许子组件触发自定义事件，并在事件中传递数据。在子组件中，通过 $emit 方法触发事件，并在事件中传递数据；在父组件中，通过 v-on 指令监听子组件触发的事件，并在事件处理函数中接收数据。

<!-- 子组件 -->
<template>
  <button @click="handleClick">Send Message</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello from ChildComponent!')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg) // 输出: Hello from ChildComponent!
    }
  }
}
</script>

三、双向绑定：父子数据同步

双向绑定允许父组件和子组件共享数据。当父组件或子组件中的数据发生变化时，另一个组件中的数据也会随之更新。通过 v-model 指令实现双向绑定，它将父组件的数据绑定到子组件的表单元素上。

<!-- 父组件 -->
<template>
  <input v-model="count">
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <input v-model="count">
</template>

<script>
export default {
  props: ['count']
}
</script>

四、provide/inject：组件间依赖注入

provide/inject 是一种依赖注入机制，允许父组件向其子组件和孙组件提供数据或方法，而无需显式地传递。在父组件中，通过 provide 选项提供数据或方法；在子组件中，通过 inject 选项注入数据或方法。

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      msg: 'Hello from ParentComponent'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  inject: ['msg']
}
</script>