vue父子组件之间的传参的几种方式小结

在Vue.js应用程序中，组件是构成应用程序的基本组成部分。在一个应用程序中，有可能会有很多个组件，而这些组件之间可能需要进行参数传递。而在组件之间进行数据传递，我们通常把“子组件”称为“子孙组件”，把“父组件”称为“父祖组件”。

在Vue.js中，有多种方式可以实现父子组件之间的数据传递。以下是比较常见的几种方式：

1. Props

Props 是父组件向子组件传递数据的方式，常用于单向数据流的场景。父组件通过在子组件标签上定义属性值来实现传值，子组件则通过 props 字段声明要接收哪些属性。

以下示例演示了父组件向子组件传递数据的过程：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- 子组件 -->

<script>
export default {
  props: {
    message: String
  }
}
</script>

在父组件中，我们定义了一个属性 parentMessage，子组件通过在标签上定义属性 :message="parentMessage" 来接收属性值。

在子组件中，我们通过在 props 字段中声明该属性来接收来自父组件的属性值，并将其存在 message 属性中。

2. $emit/$on

$emit 是子组件向父组件传递数据的方式，常用于事件场景中。子组件通过触发某个事件，并将需要传递的数据作为事件参数来实现传值，父组件在监听该事件时，可以通过定义事件回调函数来接收来自子组件的数据。

以下示例演示了子组件向父组件传递数据的过程：

<!-- 父组件 -->
<template>
  <div>
    <child-component @message-from-child="handleMessageFromChild"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessageFromChild(message) {
      console.log(message)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleBtnClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleBtnClick() {
      this.$emit('message-from-child', 'Hello from child')
    }
  }
}
</script>

在子组件中，我们通过 $emit 方法触发名为 message-from-child 的事件，并将数据 'Hello from child' 传递给该事件的回调函数。

在父组件中，我们通过使用 @message-from-child="handleMessageFromChild" 监听名为 message-from-child 的事件，并将其回调函数定义为 handleMessageFromChild。当子组件触发该事件时，该回调函数将被调用，从而实现子组件向父组件传递数据的过程。

以上是vue父子组件之间传参的几种方式小结，其他方式如provide/inject，Event Bus等大家可以根据自己的需求进行选择。