V001-vuerouter是怎么传值的
在路由处配置
path:'/detail/:id'
调用：
this.$router.push({
path:'/home/${id}'
})
在组件内通过this.$route.params.id即可获取。
2.在router-link标签中传递参数。
<router-link :to = {
params:{
id:1
}
}/>
也可通过： this.$route.params.id获取
这里通过router-link传参方式是隐形传参
3.另一种params的是通过params传参，通过name配置路由。
//路由处：
{
path：'/home',
name:'Home',
component:Home
}
调用：
this.$router.push({
name:'Home',
params:{
id:id
}
})
获取： this.$route.params.id
4.通过query来传递参数，参数会在url后边的?id=?中显示
//路由处：
{
path：'/home',
name:'Home',
component:Home
}
调用：
this.$router.push({
path:'/home',
query:{
id:id
}
})
获取： this.$route.query.id
V002-v-if和v-for一起使用的弊端及解决办法
由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。
解决办法：
1.在v-for的外层或内层包裹一个元素来使用v-if
2.用computed处理
<ul>
<li
v-for="item in qdleaderArr"
v-if="item.isActive"
:key="item.id"
>
{{ item.name }}
</li>
</ul>
处理为：
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>
V003-beforeDestory里面一般进行什么操作
beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清
①解绑自定义事件 event.$off
②消除定时器
③解绑自定义的DOM事件 如window.scroll等
比如这个场景：日期在我点击查询的时候要存储,刷新就读内存,但是我点击其他页面再进来的时候,这个内存要清空
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-同级组件传值
1.如果是兄弟组件，可通过父元素作为中间组件进行传值
1.2 $emit传值，props接收
使用$emit将child1.vue的值给父组件，父组件将值传给child2.vue,child2.vue使用props接收
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.通过创建一个bus，进行传值
// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)
// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)
具体使用： 在main.js同级目录下新建bus.js文件
import Vue from 'vue'
export default new Vue()
2、在组件a中传出值
先引入bus.js文件，再通过$emit传值
<template>
<div @click="onfocus"></div>
</template>
<script>
import Bus from '@/bus.js'
export default{
methods:{
onfocus:function(fromid){
Bus.$emit('getisshow',{
show:true
})
}
}
}
</script>
3、在同级b组件中通过$on接收
<script>
import Bus from '@/bus.js'
export default{
created(){
Bus.$on('getisshow',data => {
console.log(data) //{show:true}
})
}
}
</script>
扫码加群
github面试题每日更新 github.com/qdleader/qd…
