vue-next repo剖析之$attrs和emits选项关系

2023-12-15 04:20:01

组件通信的桥梁：$attrs和emits选项

在vue-next中，$attrs和emits选项是组件通信的利器。它们允许父组件向子组件传递数据，并监听子组件发出的事件。通过这两个选项，我们可以构建出灵活且可复用的组件，从而实现复杂界面的搭建。

问题场景：Child组件的Emit Child按钮为何不触发Parent的myEventHandler事件？

为了更好地理解$attrs和emits选项，让我们从一个真实的issue入手。假设我们有一个Parent组件，一个Mid组件和一个Child组件。Child组件包含一个Emit Child按钮，点击该按钮应该触发Parent组件的myEventHandler事件。然而，当我们点击该按钮时，myEventHandler事件却并没有触发。

拨开迷雾：追踪组件通信的奥秘

为了解决这个问题，我们需要深入探究组件通信的奥秘。首先，我们需要在Parent组件中定义myEventHandler事件处理函数。然后，我们需要在Child组件中使用$emit方法触发myEventHandler事件。最后，我们需要在Mid组件中使用v-on指令监听Child组件发出的myEventHandler事件，并将其传递给Parent组件。

代码示例：让组件通信畅通无阻

<!-- Parent.vue -->
<template>
  <div>
    <Mid :attrs="attrs" @my-event-handler="myEventHandler" />
  </div>
</template>

<script>
export default {
  methods: {
    myEventHandler() {
      // 处理事件
    }
  }
}
</script>

<!-- Mid.vue -->
<template>
  <div>
    <Child v-on="attrs" @my-event-handler="$emit('my-event-handler')" />
  </div>
</template>

<!-- Child.vue -->
<template>
  <div>
    <button @click="$emit('my-event-handler')">Emit Child</button>
  </div>
</template>
</script>