Vue 父子组件传参方式

在 Vue 中，组件的通信是非常重要的。父子组件是两个比较常见的组件角色，如何在父组件和子组件之间传递数据呢？

本文将探讨 Vue 中父子组件传参的几种方式，包括：props、$emit 和 provide/inject。

Props

Props 是一种父组件向子组件传递数据的方式。在子组件中通过 props 定义属性，来声明要接收哪些父组件传递过来的数据。

<!-- Parent.vue -->
<template>
  <Child :message="myMessage" />
</template>
<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return {
      myMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
}
</script>

以上代码中，父组件 Parent.vue 传递了一个 message 属性给子组件 Child.vue。

在子组件中，通过 props: ['message'] 定义了一个 message 属性，接收父组件传递过来的数据。

在模板中，通过 {{ message }} 来输出这个属性。

$emit

除了从父组件向子组件传递数据，Vue 还提供了一种从子组件向父组件传递数据的方式——$emit。

在 Vue 中，每个组件实例都有一个 $emit 方法，用来触发当前组件实例上的自定义事件。在父组件中，用 v-on 来监听这个自定义事件。

<!-- Parent.vue -->
<template>
  <Child @myEvent="handleChildEvent" />
</template>
<script>
import Child from './Child.vue';
export default {
  components: { Child },
  methods: {
    handleChildEvent(message) {
      console.log(message); // 'Hello from child'
    }
  }
}
</script>

<!-- Child.vue -->
<template>
  <button @click="$emit('myEvent', 'Hello from child')">Click me</button>
</template>

以上代码中，子组件 Child.vue 中定义了一个点击事件 @click，每次点击时会触发 $emit('myEvent', 'Hello from child')，向父组件传递数据。

在父组件中，用 @myEvent="handleChildEvent" 来监听这个自定义事件，并传递参数 handleChildEvent(message)。

Provide/Inject

另一种组件间通信的方式是 provide/inject。它允许一个祖先组件向其所有子孙组件注入一个依赖，不论组件层次有多深，并在所有子孙组件中可用。

<!-- Grandparent.vue -->
<template>
  <Parent></Parent>
</template>
<script>
import Parent from './Parent.vue'
export default {
  components: {
    Parent
  },
  provide() {
    return {
      grandParentMessage: this.message
    }
  },
  data() {
    return {
      message: 'Hello from grandparent'
    }
  }
}
</script>

<!-- Parent.vue -->
<template>
  <Child></Child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  }
}
</script>

<!-- Child.vue -->
<template>
  <div>{{ grandParentMessage }}</div>
</template>
<script>
export default {
  inject: ['grandParentMessage']
}
</script>

在上面这个示例中，Grandparent.vue 组件通过 provide 注入了属性 message 给它的后代组件。Parent.vue 组件并没有显示地定义组件的 props。

组件 Child.vue 中的 inject 选项表示在父组件一层层向上寻找名为 grandParentMessage 的 provide 对象，找到后注入到它的组件实例的 $options 对象中。然后就可以在模板中使用这个属性了。

总结

以上就是 Vue 父子组件传参的三种方式：props、$emit 和 provide/inject。我们可以根据实际情况选择合适的方式，来实现组件间的数据传递和通信。

如果您想深入了解组件间通信、Vue 的实现原理，可以阅读 Vue.js 官方文档以及相关书籍和博客，不断学习和实践，提高自己的技术水平。