Questions d'entretien de vue sélectionnées (points clés)

Comment V001-vuerouter transmet la valeur

1 Configurez

path:'/detail/:id'
调用：
this.$router.push({
    path:'/home/${id}'
})

au point de routage et transmettez-la dans le. composantthis.$route.params.idVous pouvez l'obtenir maintenant.

[Recommandation de sujet] : Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Passez-le dans le router-link paramètre de balise.

<router-link :to = {
    params:{
        id:1
    }
}/>

peut également être obtenu via : this.$route.params.id

La méthode de transmission des paramètres ici via le lien du routeur est la transmission de paramètres invisibles

3. La méthode Params consiste à transmettre les paramètres via params et à configurer le routage via name.

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})

Get : this.$route.params.id

4. Transmettez les paramètres via la requête, les paramètres seront affichés dans le ?id=? après l'url

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})

Get : this.$route.query.id

Inconvénients et solutions de l'utilisation de V002-v-if et v-for ensemble

Parce que v-for a une priorité plus élevée que v-if, cela provoque chaque Chaque boucle ira à v-if une fois, et v-if contrôle l'affichage et le masquage des éléments en créant et en détruisant des éléments dom, de sorte que les éléments seront créés et détruits en continu, provoquant un décalage de page et une dégradation des performances.

Solution :

1. Enveloppez un élément dans la couche externe ou interne de v-for pour utiliser v-if

Utilisation calculée pour traiter

  <ul>
        <li
          v-for="item in qdleaderArr"
          v-if="item.isActive"
          :key="item.id"
        >
          {{ item.name }}
        </li>
  </ul>

.

Traité comme :

computed: {
    qdleaderArrActive: function () {
        return this.qdleaderArr.filter(function (item) {
          return item.isActive
        })
    }
}
<ul>
    <li
      v-for="item in qdleaderArrActive"
      :key="item.id"
    >
        {{ item.name }}
    </li>
</ul>

Quelles opérations sont généralement effectuées dans V003-beforeDestory

beforedestoryed est un cycle de vie exécuté avant que le composant ne soit détruit dans ce cycle de vie. , Nous pouvons effacer les fonctions de rappel ou les minuteries

①Dissocier les événements personnalisés event.$off ②Éliminer les minuteries③Dissocier les événements DOM personnalisés tels que window.scroll, etc.

Par exemple, ce scénario : La date doit être stocké lorsque je clique sur la requête, et la mémoire de lecture doit être rafraîchie, mais lorsque je clique sur d'autres pages et que je reviens, cette mémoire doit être effacée

search(){
      let time = {
        start: this.formSearch.beginSearchTime,
        end: this.formSearch.endSearchTime,
        timeRange: this.formSearch.timeRange,
        page: this.formSearch.page
      }
      localStorage.setItem('initTime',JSON.stringify(time))
    }
 created () {
    let searchCarTime = JSON.parse(localStorage.getItem('initTime'))
    if (searchCarTime) {
      this.formSearch.beginSearchTime = searchCarTime.start
      this.formSearch.endSearchTime = searchCarTime.end,
      this.formSearch.timeRange = searchCarTime.timeRange
      this.formSearch.page = searchCarTime.page
    }
  },
 beforeDestroy(){
    localStorage.removeItem('initTime')
  }

V004-Composant similaire passant valeur

1. S'il s'agit d'un composant frère, la valeur peut être transmise via l'élément parent en tant que composant intermédiaire

1.2 $emitPasser la valeur et recevoir les accessoires

Utilisez $emit pour child1. La valeur de vue est donnée au composant parent, et le composant parent transmet la valeur à child2.vue Child2.vue utilise des accessoires pour recevoir

parent.vue

<template>
  <div>
     <h2>我是父组件</h2>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 :ptitle="title"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickChangeTitle(title){//将改方法传递给child1组件
        this.title = title
    }
  }
}
</script>

child1.vue

<template>
  <div>
     <h2>我是child1组件</h2>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件
    }
  }
}
</script>

child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

2. Passer les valeurs en créant un bus

// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)
// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)

Utilisation spécifique : Créer un nouveau bus. js dans le même répertoire que main.js

import Vue from 'vue'
export default new Vue()

2 . Pour transmettre la valeur

dans le composant a, introduisez d'abord le fichier

, puis transmettez la valeur bus.js.

<template>
    <div @click="onfocus"></div>
</template>
<script>
    import Bus from &#39;@/bus.js&#39;
    
    export default{
        methods:{
            onfocus:function(fromid){
                Bus.$emit(&#39;getisshow&#39;,{
                    show:true
                })
             }
        }
    }
</script>

$emit à

. 3. Dans le composant b du même niveau, recevez >

<script>
    import Bus from &#39;@/bus.js&#39;
    
    export default{
        created(){
            Bus.$on(&#39;getisshow&#39;,data => {
                console.log(data)   //{show:true}
            })
        }
    }
</script>

$onRecommandations d'apprentissage associées :

tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!