【Vue项目】面包屑处理品牌信息

原创

于 2022-06-22 15:16:54 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

需求

点击品牌图片，实现：品牌相关的数据展示和面包屑出现该字段，并可以删除该字段再渲染

思路

面包屑放在了Search这个组件里，品牌放在了SearchSelector组件中，SearchSelector是Search的子组件。

现在考虑点击SearchSelector组件里的某个品牌（以“华为”举例），将“华为”这个品牌信息传递给父组件Search组件的面包屑中。那么要如何实现？

1.子传父考虑用自定义事件给子组件SearchSelector绑定tradeMarkHandler事件

SearchSelector组件相关代码:

<template>
<ul class="logo-list">
    <li v-for="(trademark,index) in trademarkList" 
    :key="trademark.tmId" 
    @click="tradeMarkHandler(trademark)">
    {
  
  {trademark.tmName}}
    </li>
</ul>
</template>
<script>
import {mapGetters} from "vuex";
  export default {
    name: 'SearchSelect