如何通过$emit()和$dispatch()实现子组件向父组件传值

Vue.js 是一款渐进式框架，允许开发者通过组件化的方式构建复杂的应用。在组件化开发过程中，子组件和父组件之间的通信是一个常见的需求。Vue.js 提供了 $emit() 和 $dispatch() 来实现组件之间的通信，本文将详细介绍如何使用这两个方法来实现子组件向父组件传值。

## 父组件向子组件传值

在组件化开发中，父组件可以通过 props 属性向子组件传递数据。props 是一个数组，数组中的每一项都是一个对象，对象中可以设置数据的名称、类型和默认值。

父组件传递数据到子组件的示例代码：

<template>
  <div>
    <child-component message="Hello Vue.js">
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

在上面的例子中，父组件通过 props 属性向子组件传递了一个字符串类型的数据，数据的名称为 message，数据的默认值为 "Hello Vue.js"。

子组件接收父组件传递的数据的示例代码：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  }
}
</script>

在上面的例子中，子组件通过 props 属性接收父组件传递的数据，数据的名称和类型需要与父组件传递的数据保持一致。

## 子组件向父组件传值

子组件向父组件传递数据的方式有两种：$emit() 和 $dispatch()。$emit() 可以向父组件派发自定义事件，并且可以传递数据；$dispatch() 可以向父组件的根组件派发自定义事件，并且可以传递数据。

### $emit()

$emit() 方法是 Vue.js 提供的一个实例方法，在组件实例中可以直接调用。$emit() 方法接受两个参数：事件名称和要传递的数据。

子组件通过 $emit() 向父组件传递数据的示例代码：

<template>
  <button @click="emitDataToParent">传递数据到父组件</button>
</template>

<script>
export default {
  methods: {
    emitDataToParent() {
      let data = 'Hello Vue.js';
      this.$emit('emit-data', data);
    }
  }
}
</script>

在上面的例子中，子组件通过 $emit() 方法向父组件派发了一个名为 "emit-data" 的自定义事件，并且传递了一个字符串类型的数据。

父组件接收子组件传递的数据的示例代码：

<template>
  <div>
    <child-component @emit-data="handleDataFromChild"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleDataFromChild(data) {
      console.log(data); // 'Hello Vue.js'
    }
  }
}
</script>

在上面的例子中，父组件通过在子组件标签上添加 @emit-data 监听子组件派发的事件，并且在 handleDataFromChild() 方法中获取子组件传递的数据。

### $dispatch()

$dispatch() 方法是一个实例方法，并且只能在根组件中使用。$dispatch() 方法接受两个参数：事件名称和要传递的数据。

子组件通过 $dispatch() 向父组件传递数据的示例代码：

<template>
  <button @click="dispatchDataToParent">传递数据到父组件</button>
</template>

<script>
export default {
  methods: {
    dispatchDataToParent() {
      let data = 'Hello Vue.js';
      this.$dispatch('dispatch-data', data);
    }
  }
}
</script>

在上面的例子中，子组件通过 $dispatch() 方法向根组件派发了一个名为 "dispatch-data" 的自定义事件，并且传递了一个字符串类型的数据。

根组件接收子组件传递的数据的示例代码：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  events: {
    'dispatch-data': function(data) {
      console.log(data); // 'Hello Vue.js'
    }
  }
}
</script>

在上面的例子中，根组件通过 events 属性监听子组件派发的事件，在事件回调函数中获取子组件传递的数据。需要注意的是，$dispatch() 方法只能向根组件派发事件，无法向其他父组件传递数据。

## 小结

通过 $emit() 和 $dispatch() 方法，我们可以实现子组件向父组件传递数据。$emit() 可以向父组件派发自定义事件并传递数据，$dispatch() 可以向根组件派发自定义事件并传递数据。在通信过程中，事件名称需要保持一致，数据的类型和格式需要对应好。掌握了这两种方法，我们可以更加灵活地组合组件，实现更加丰富的交互效果。