9. 项目 [vuejs-07]：在组件层次结构中上报事件

项目树结构如下：

9.1. 主脚本 [main.js]

主脚本 [main.js] 保持不变。

9.2. 主组件 [App]

组件 [App] 的代码如下：

<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-07] : remontée d'événements dans la hiérarchie des composants</h4>
      </b-alert>
      <Component1 />
    </b-card>
  </div>
</template>

<script>
  import Component1 from './components/Component1'
  export default {
    name: "app",
    components: {
      Component1
    }
  };
</script>

组件 [App] 使用了新组件 [Component1]（第 7、13、17 行）。

9.3. 组件 [Component11]

组件 [Component11] 的代码如下：

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- 脚本 -->
<script>
  export default {
    name: "component11",
    // 组件方法
    methods: {
      // 管理按钮上的 [click] 事件
      createEvent() {
        // 触发与数据关联的事件
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

注释

• 第 1-3 行：[Component11] 组件仅包含一个可点击的按钮。点击该按钮时，将执行第 11-14 行中的 [createEvent] 方法；
• 第 13 行：每个 [Vue] 实例都拥有一个 [$emit] 方法，用于触发事件：
  • 第一个参数是触发的事件名称；
  • 第二个参数是希望与该事件关联的数据；
  • 触发的事件会沿 [Component11] 组件的父级层次结构向上传播。该事件将沿层次结构向上传播，直至找到一个能够处理该事件的组件。此向上传播过程始于 [Component11] 的父组件；

9.4. 组件 [Component1]

[Component1] 组件的代码如下：

<template>
  <b-row>
    <!-- 触发事件的组件 -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- 事件处理方法显示的消息-->
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import Component11 from "./Component11";
  export default {
    name: "component1",
    // 组件
    components: {
      Component11
    },
    // 组件状态
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // 事件处理方法
    methods: {
      doSomething(data) {
        // data 是与事件 [someEvent] 关联的对象
        this.data = data;
        // 显示警报
        this.showMsg = true;
      }
    }
  };
</script>

视觉呈现

注释

• 第5行：[Component1]是[Component11]的父组件，因此可以“监听”（这是专业术语）该组件发出的事件。已知该组件可发出事件[someEvent]。 属性 [@someEvent="doSomething"] 表示：如果由 [Component11] 发出的事件 [someEvent] 发生，则必须执行第 33 行中的方法 [doSomething]；
• 第 9-11 行：由方法 [doSomething] 显示的一条消息。 其显示由第28行的布尔值[showMsg]控制。该警报显示第27行的属性[data]；
• 第33行：当第5行的事件[someEvent]发生时，方法[doSomething]会被调用，并接收与该事件关联的数据[data]作为参数。 该参数被赋值给第27行的[data]属性，并由第11行显示；
• 第 37 行：将属性 [showMsg] 设置为 [true]，以显示第 9-11 行的警报；

9.5. 项目执行