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

Posted 2023-02-23

【中文标题】Nuxt / Vue：组件在页面中调用方法

【英文标题】：Nuxt / Vue : Component call a Method in a page

【发布时间】：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/…

【参考方案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