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>

And Counter组件:

<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

你可以做三件事:

1. 用pinia创建计数器存储，从任何地方改变计数器状态
2. 安装mitt (npm Install—save mitt)，从任何地方发送和接收事件，并在('productAdded')上更新您的组件
3. 创建一个对CounterComponent的引用，以便从父组件直接访问组件属性，

像:

JS
const counterRef = ref()
Template
<CounterComponent ref='counterRef' />

然后在span事件处理程序中:

counterRef.count = 1;