v001-vuerouter是怎么传值的
1.在路由处配置
path:'/detail/:id'调用：this.$router.push({ path:'/home/${id}'})
在组件内通过this.$route.params.id即可获取。
【专题推荐】：2020年前端vue面试题大汇总（附答案）
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>
相关学习推荐：javascript视频教程
以上就是精选vue面试题（重点）的详细内容。