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.id
Vous 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 $emit
Passer 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>
// 创建一个文件,定义bus中间件,并导出 const bus = new Vue() // 在一个组件中发送事件 bus.$emit('事件名称', 传递的参数) // 在另一个组件中监听事件 bus.$on('事件名称', 得到传过来的参数)
import Vue from 'vue' export default new Vue()
, puis transmettez la valeur bus.js
.
<template> <div @click="onfocus"></div> </template> <script> import Bus from '@/bus.js' export default{ methods:{ onfocus:function(fromid){ Bus.$emit('getisshow',{ show:true }) } } } </script>
$emit
à . 3. Dans le composant b du même niveau, recevez <🎜 à >
<script> import Bus from '@/bus.js' export default{ created(){ Bus.$on('getisshow',data => { console.log(data) //{show:true} }) } } </script>
$on
Recommandations 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!