浅谈Vue2.0父子组件间事件派发机制

父子组件通信

在Vue中，父子组件通过props和$emit的方式进行通信。props是从父组件向子组件传递数据的方式，而$emit则是从子组件向父组件传递事件的方式。

父组件通过props向子组件传递值：

<template>
  <div>
    <ChildComponent :value="data"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello World!'
    }
  }
}
</script>

子组件中则通过props来接收父组件传递过来的值：

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>

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

在子组件中，可以通过$emit来派发一个自定义事件（可以携带参数）：

<template>
  <div>
    <button @click="onClick">点击传递事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('my-event', 'Hello World!')
    }
  }
}
</script>

然后在父组件中，通过$on监听这个事件，并处理其中携带过来的参数：

<template>
  <div>
    <ChildComponent @my-event="onMyEvent"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMyEvent(data) {
      console.log(data) // Hello World!
    }
  }
}
</script>

父子组件事件派发机制

除了使用$emit派发自定义事件外，Vue还提供了$parent和$children两个属性，用于父子组件间的直接通信。

• $parent: 指向当前组件的父组件实例，可以通过它来调用父组件的方法或访问父组件的数据。

• $children: 该属性指向当前组件所拥有的直接子组件实例数组，可以通过它来直接访问子组件。

举例来说，父组件可以通过$children属性，直接访问子组件并调用子组件中的方法：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

子组件中则可以通过$parent属性，直接访问父组件并调用父组件的方法：

<template>
  <div>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}
</script>

需要注意的是，虽然通过$parent和$children可以直接访问父子组件间的方法和数据，但这会导致组件间高度耦合，不易维护和扩展。在实际开发中，应尽量避免直接访问父子组件中的方法和数据，而是通过props和$emit的方式进行通信。