• 技术文章 >web前端 >js教程

    精选vue面试题(重点)

    coldplay.xixicoldplay.xixi2020-08-01 10:22:27转载100

    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面试题(重点)的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:weixin,如有侵犯,请联系a@php.cn删除
    专题推荐:vue面试题
    上一篇:windows本地搭建easy-mock环境教程 下一篇:50个必知必会的React面试题
    第12期线上周末培训班

    相关文章推荐

    • 2020年js面试题及答案(大汇总)• 2020年ajax面试题及答案(最新)• 2020年Android面试题大汇总【收藏】• 2020年oracle面试题汇总(最新)• 2020年最新mysql面试题大总结

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网