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 -->
<script>
  export default {
    name: "component11",
    // component methods
    methods: {
      // event management [click] on button
      createEvent() {
        // we send an event coupled to data
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

评论

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

9.4. [Component1] 组件

[Component1] 组件的代码如下：

<template>
  <b-row>
    <!-- le composant qui lance l'événement -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- message affiché par la méthode de gestion de l'évt-->
    <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",
    // composants
    components: {
      Component11
    },
    // état du composant
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // méthodes de gestion des évts
    methods: {
      doSomething(data) {
        // data est l'objet qui a été associé à l'évt [someEvent]
        this.data = data;
        // affiche l'alerte
        this.showMsg = true;
      }
    }
  };
</script>

可视化渲染

评论

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

9.5. 运行项目