精选vue面试题（重点）

前端  /  管理员 发布于 6年前   407

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面试题（重点）的详细内容，更多请关注其它相关文章！