Nuxt / Vue：组件在页面中调用方法答案

【问题标题】：Nuxt / Vue : Component call a Method in a pageNuxt / Vue：组件在页面中调用方法
【发布时间】：2021-07-20 14:28:26
【问题描述】：

这是我的问题：

我的页面listing.vue 列出所有产品。这些产品在一个组件中，Product.vue。

在这个组件中，有一个按钮可以将此产品添加到选择中，显示在listing.vue上。

页面/listing.vue：

<template>
  <div>
    <product v-for="...." />
     
    <section>
      <ul>
        <li>Produit 1</li>
        <li>Produit 3</li>
    </section>
  </div>
</template>

<script>
export default {
  methods: {
    addToSelection(id) {
      // Code to add Product to <ul> //
    }
  }
}
</script>

组件/product.vue：

<template>
  <div>
    {{ product.title }}
    <button @click="addToSelection(product.id)">
      Add product to selection
    </button>
  </div>
</template>

<script>
export default {
  props: ['product'],
}
</script>

问题是nuxt渲染错误：

addToSelection 方法未知。

【问题讨论】：

您应该使用<Product /> 或<product></product>，但不能像这里解释的那样混合使用：vuejs.org/v2/style-guide/…

标签： vue.js methods components nuxt.js

【解决方案1】：

你应该从你的孩子向你的父母发射

Product.vue

<button @click="emitProductToParent(product.id)">

...
methods: {
  emitProductToParent(id) {
    this.$emit('input', id)
  }
}

Listing.vue

<Product @input="addToSelection" v-for="...." />

您不能使用不在您的事件侦听器所在的组件中的方法。即使你可以，这也不是办法。使用：

把东西传给孩子的道具
将事情传递给父母

如官方文档中所述：https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

【讨论】：