vue 3-零件收听事件

Question

我有主页的以下代码：

<script setup>

import {useProductStore} from "@/store/products";
import {useTableOrderStore} from "@/store/tableOrder";
import {computed, reactive, ref} from "vue";
import {storeToRefs} from "pinia";

import CounterComponent from "@/components/Counter.vue"

const productStore = useProductStore()
const tableOrderStore = useTableOrderStore()

const categoryId = ref('all')

let { products } = storeToRefs(productStore)
let { categories } = storeToRefs(productStore)

const filteredProducts = computed(() => {

  if(categoryId.value === 'all')
  {
    return products.value
  }

  return products.value.filter(product => product.productCategoryID == categoryId.value)
})

</script>

<template>

  <div>
    <div class="row">
      <div class="col-md-2">
        <button class="d-block w-100"
                @click="categoryId = 'all'">All</button>
        <button class="d-block w-100"
                @click="categoryId = category.id"
                :key="category.id"
                v-for="category in categories">{{ category.name }}</button>
      </div>
      <div class="col">
        <p v-for="product in filteredProducts"
            :key="product.id">{{ product.name }}

          <CounterComponent />

          <span @click="tableOrderStore.addToOrder(product); $emit('productAdded')">Add to order</span>
        </p>
      </div>
    </div>
  </div>

</template>

和计数器组件：

<script setup>

import {ref} from "vue"

let count = ref(1)

let increase = () => {
  count.value++
}

let decrease = () =>
{
  if(count.value === 1)
    return

  count.value--
}

let reset = () => {
  count.value = 1
}

</script>

<template>
  <div class="input-group">
          <span class="input-group-btn">
              <button type="button"
                      class="btn btn-danger btn-number"
                      data-type="minus"
                      @click="decrease"
              >
                <font-awesome-icon icon="fas fa-minus-circle" />
              </button>
          </span>
    <input type="text"
           name="quantity"
           :value="count"
           class="form-control input-number"
           min="1"
    >
    <span class="input-group-btn">
              <button type="button"
                      class="btn btn-success btn-number"
                      data-type="plus"
                      @click="increase"
              >
                  <font-awesome-icon icon="fas fa-plus-circle" />
              </button>
          </span>
  </div>
</template>

单击此元素后如何重置计数器：

<span @click="tableOrderStore.addToOrder(product); $emit('productAdded')">Add to order</span>

Answer 1

您可以做3件事：

1. 用PINIA制作柜台商店，以从任何位置安装MITT（NPM安装-Save MITT）突变计数器状态
2. '）
3. ，以从任何地方进行EMITT和接收事件，并在（'ProductAdded'）上更新组件（ 'ProductAdded 到反组件直接访问父母的组件属性，

如以下内容：

JS
const counterRef = ref()

Template
<CounterComponent ref='counterRef' />

然后在跨度事件处理程序中：

counterRef.count = 1;