將 ProductInfo 註冊到 ProductApp component 底下,並使用該 component 標籤
<template>
...
<product-info v-if="product" :item="product"></product-info>
...
</template>
<script>
...
import ProductInfo from '@/components/ProductInfo';
export default {
data() {
return {
product: undefined,
};
},
components: {
ProductList,
ProductInfo,
},
};
</script>
這裡我們使用 v-if 來控制當商品尚未被選擇時的情況隱藏商品詳情區塊,並透過 v-bind 的方式,讓商品資料動態
地傳入 ProductInfo component 中;
再來,最重要的一步,我們要偵測使用者在 ProductList 點擊商品,並將該商品資料傳送給 ProductInfo:
<!-- PrdocutList.vue -->
<template>
<div>
<div class="product-container" v-for="product in products"
:key="product.id" @click="onProductClick(product)">
...
</div>
</div>
</template>
<script>
export default {
...
methods: {
onProductClick(product) {
this.$emit('product-click', product);
},
},
}
</script>
在 ProductList 的 container 加入 @click 事件監聽,並傳入 product 作為參數,再利用this.$emit(eventname,argument) 來觸發外部事件
※@click 為 v-on:click 的縮寫
※this.$emit(eventname, argument),eventname 與外部使用 component 時的事件監聽一致,以 kebabcase
格式命名,如 my-event
<!-- ProductApp -->
<template>
<div>
<product-list v-on:product-click="onProductClick"></product-list>
...
</div>
</template>
<script>
export default {
...
methods: {
onProductClick(product) {
this.product = product;
},
},
}
</script>
在 ProductApp 的 product-list element 加入 @product-click 事件監聽並指定其觸發的方法
如此,我們已經透過傳遞資料的方式做到組件間資料溝通的實作