1. vue Componentized Development and Value Transfer

1. Starting with the second line of goods, there is a margin-top value from the previous line, but the first line is not needed.In my practice, each line is required, except that the distance from the value of the element on the first line subtracts the margin-top value.Simple practice:'wrap': index>2

<router-link tag='div' :class="{'app-card':true,'wrap':index>2}" :to="{}">
     <img class="logo" :src="getImgSrc(info.icon)" alt="">
     <div class="name">{{name}}</div>
     <div class="pay">{{info.remark}}</div>
</router-link>

css
.wrap{
     margin-top: 0.1rem;
}

2. Component development, AppCard.vue and GuideHeadline.vue, is used somewhere in Home.vue.The home page passes values to the component.This page below is in Home.vue, which uses two components (as shown above)

1) Home.vue code: pass values to components by defining info variables

<div class="zone" v-if="zone == 'hot'" v-show="hotApps.length">
     <guide-headline :info="guide2"></guide-headline>
     <div class="hot-list">
          <app-card v-for="(item,k) in hotApps" :key="k" :info="item" :index="k"></app-card>
     </div>
</div>
//hotApps is an array returned from an interface and is the data for the list of goods to be displayed

//Guid2. is defined in the data and assigned to the variable info.Pass to child components
guide2:{
    name:'Popular Recommendations',
    id:'1'
},

2) Subcomponent GuideHeadline.vue

<template>
    <div class="guide-headline">
            <span class="name">{{info.name}}</span>
            <router-link v-show="info.id" class="link" tag='span'  :to="{name: 'sort', params: {type:info.id}}"><span style="padding-right:0.1rem">More</span>></router-link>
        </div>
</template>

<script>
    export default {
        name: "guide-headline",
        props:['info'],
    }
</script>

In the subcomponent, the name matches the name of the component referenced in Home.vue, and props are used to get data from Home.vue.

tips:1, router-link can add tag="span" tag to add an element to this link.2. Whether Home.vue is displayed depends on the length of the subcomponents. My previous practice was to define a Boolean variable and use v-if to control whether Home.vue is displayed or not. Simple practice: directly control whether Home.vue is displayed based on hotApps.length.

3) Subcomponent AppCard.vue

<template>
        <router-link tag='div' :class="{'app-card':true,'wrap':index>2}" :to="{name: 'goodsDetail', params: {mid:info.mid,saleid:info.saleid,proid: info.proid }}">
            <img class="logo" :src="getImgSrc(info.icon)" alt="">
            <div class="name">{{name}}</div>
            <div class="pay">{{info.remark}}</div>
        </router-link>
</template>

<script>
    export default {
        name: "app-card",
        props:["info","index"],
        computed:{
            name(){
                if(this.info.name.length > 8){
                    return this.info.name.substring(0, 7) + '...'
                }else{
                   return this.info.name
                }
                
            }
        },
        methods: {
            getImgSrc(src){
                return process.env.VUE_APP_IMG_PRE + src
            }
        }
    }
</script>

This is also where values are passed through info.

Total: For the above figure, I may be writing a v-for for for the first reaction to read the list of data returned by the background interface in a loop.But you should learn to write each item as a component and render the component in a for loop

2. Jump between img and components

I wrote it myself first

<div class="hot-search-title">Search History<img src="../assets/imgs/search/del-history.png"></div>

img by colleague

<img :src="require('@imgs/search/search-icon.png')" class="search-icon">

@img is defined in vue.config.js

.set('@imgs', resolve('src/assets/imgs'))

Feel like I don't understand vue at all!!!

There are also jumps to other pages (goodsDetail.vue), which I modified. Write incorrectly before jumping. Complete the @click.native="saveWord()" event before jumping. Skip params with parameters

<li v-for="val in searchResult" :key="val.id">
    <router-link :to="{name:'goodsDetail',params:{mid:val.mid}}" class="result-link" @click.native="saveWord(val.name)">
          <img :src="val.iconUrl" class="result-icon">
          <div class="search-result-detail">
                <span class="result-item">{{val.name}}</span>
                <span class="result-price">{{val.price}}Yuan Qi/month</span>
          </div>
     </router-link>                         
</li>