Vue 教程

接收发出事件

自定义发出事件"toggle-favorite"现在从 FoodItem.vue 组件发出，但我们需要侦听 App.vue 父组件中的事件并调用执行某些操作的方法，以便我们可以看到事件发生。

我们在创建组件的 App.vue 中使用简写 @ 而不是 v-on: 来监听事件:

示例

监听 App.vue 中的"toggle-favorite"事件:

<food-item
  v-for="x in foods"
  :key="x.name"
  :food-name="x.name"
  :food-desc="x.desc"
  :is-favorite="x.favorite"
  @toggle-favorite="receiveEmit"
/>

当我们的自定义"toggle-favorite"事件发生时，我们需要在 App.vue 中创建"testEmit"方法，以便我们可以看到事件发生:

methods: {
  receiveEmit() {
    alert('Hello World!');
  }
}

更改父项中食物项的"收藏夹"状态

我们现在有一个事件，当从子组件中单击"收藏夹"按钮时，该事件会通知 App.vue。

我们希望在单击"收藏夹"按钮时更改 App.vue 中"食物"数组中的"收藏夹"属性，以获取正确的食物项。 为此，我们将食品名称从 FoodItem.vue 发送到 App.vue，因为每个食品名称都是唯一的:

FoodItem.vue:

methods: {
  toggleFavorite() {
    this.$emit('toggle-favorite', this.foodName);
  }
}

我们现在可以在 App.vue 中接收食物名称，作为"toggle-favorite"事件发生时调用的方法的参数，如下所示:

示例

App.vue:

methods: {
  receiveEmit(foodId) {  
    alert( 'You clicked: ' + foodId );
  }
}

现在我们知道点击了哪些食物项，我们可以更新"foods"数组中正确食物项的"favorite"状态:

App.vue:

methods: {
  receiveEmit(foodId) {
    const foundFood = this.foods.find(
      food => food.name === foodId
    );
    foundFood.favorite = !foundFood.favorite;
  }
}

在上面的代码中，数组方法"find"遍历"foods"数组，查找 name 属性等于我们单击的食物项的对象，并将该对象作为"foundFood"返回。 之后，我们可以将 'foundFood.health' 设置为与之前相反，以便它在 true 和 false 之间切换。

在此处了解有关 JavaScript 数组方法"find"的更多信息。

在此处了解有关 JavaScript 箭头函数的更多信息。

'foods' 食物数组中的正确食物现在会更新其"收藏夹的"状态。 剩下的唯一一件事就是更新指示收藏夹的食物的图像。

因为食物项组件已经使用"foods"数组中的"favorite"状态创建，并作为 App.vue 中的"is-favorite"属性发送，所以我们只需要在 FoodItem.vue 中引用此"isFavorite"属性即可 v-show 其中 <img> 元素是更新图像:

<img src="/img_quality.svg" v-show="isFavorite">

我们还可以删除 FoodItem.vue 中的"foodIsFavorite"数据属性，因为它不再使用。

示例

在最后的示例代码中，可以按照与以前类似的方式切换食物的收藏夹状态，但现在收藏夹状态已在 App.vue 内的正确位置进行了修改。

'emits'选项

与我们在 FoodItem.vue 组件中声明 props 的方式相同，我们也可以使用 Vue 'emits' 选项来记录组件发出的内容。

Props 必须在组件中声明，而emits 则建议记录下来。

这就是我们在 FoodItem.vue 组件中记录 emit 的方式:

<script>
export default {  
  props: ['foodName','foodDesc','isFavorite'],
  emits: ['toggle-favorite'],
  methods: {
    toggleFavorite() {
      this.$emit('toggle-favorite', this.foodName);
    }
  }
};
</script>

当 emits 被记录下来时，该组件将变得更容易被其他人使用。

Vue 练习

props 用于将数据从父元素发送到子组件，
 用于将信息从子组件传递到父组件。