Ausgewählte Vue-Interviewfragen (wichtige Punkte)

Wie V001-vuerouter den Wert übergibt

1. Konfigurieren Sie

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

am Routing-Punkt und übergeben Sie ihn im Komponentethis.$route.params.idSie können es jetzt bekommen.

[Themenempfehlung]: Eine Zusammenfassung der Front-End-Vue-Interviewfragen im Jahr 2020 (mit Antworten)

2 router-link Tag-Parameter.

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

kann auch erhalten werden über: this.$route.params.id

Die Parameterübergabemethode hier über Router-Link ist die unsichtbare Parameterübergabe

3 Methode Params besteht darin, Parameter über Parameter zu übergeben und das Routing über den Namen zu konfigurieren.

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

Holen Sie sich: this.$route.params.id

4. Übergeben Sie Parameter durch die Abfrage, die Parameter werden in der ?id=? angezeigt

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

Holen Sie sich: this.$route.query.id

Nachteile und Lösungen der gemeinsamen Verwendung von V002-v-if und v-for

Da v-for eine höhere Priorität als v-if hat, verursacht es alle Jede Schleife geht einmal zu v-if, und v-if steuert die Anzeige und das Ausblenden von Elementen, indem es dom-Elemente erstellt und zerstört, sodass Elemente kontinuierlich erstellt und zerstört werden, was zu Seitenverzögerungen und Leistungseinbußen führt.

Lösung:

1. Wickeln Sie ein Element in die äußere oder innere Schicht von v-for ein, um v-if

2 zu verwenden

Verarbeitet als:

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

Welche Vorgänge werden im Allgemeinen in V003-beforeDestory ausgeführt?

beforedestoryed ist ein Lebenszyklus, der ausgeführt wird, bevor die Komponente in diesem Lebenszyklus zerstört wird , Wir können Rückruffunktionen oder Timer löschen

①Benutzerdefinierte Ereignisse entbinden

②Timer eliminieren③Benutzerdefinierte DOM-Ereignisse wie window.scroll usw. entbinden. event.$off

Zum Beispiel dieses Szenario: Wenn ich auf klicke Bei der Abfrage muss das Datum gespeichert und aktualisiert werden, um den Speicher zu lesen. Wenn ich jedoch auf andere Seiten klicke und wieder hineinkomme, muss der Speicher gelöscht werden

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>

V004-Ähnlicher Komponentenübergabewert

1. Wenn es sich um eine Geschwisterkomponente handelt, kann der Wert als Zwischenkomponente über das übergeordnete Element übergeben werden

1.2

Wert übergeben und Requisiten empfangen$emit

Verwenden Sie $emit an child1. Der Wert von vue wird an die übergeordnete Komponente übergeben, und die übergeordnete Komponente übergibt den Wert an child2.vue. Child2.vue verwendet Requisiten, um

parent.vue

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')
  }

zu empfangen

child1.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>

child2.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>

2. Übergeben Sie Werte durch Erstellen eines Busses

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

Spezifische Verwendung: Erstellen Sie eine neue bus.js-Datei im selben Verzeichnis wie main.js

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

2 . Um den Wert

in Komponente a auszugeben, führen Sie zuerst die Datei

ein und übergeben Sie dann den Wert bus.js

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

$emit bis

3. Erhalten Sie in Komponente b auf dem gleichen Niveau >

<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>

$onVerwandte Lernempfehlungen:

Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusgewählte Vue-Interviewfragen (wichtige Punkte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!