VUE常见面试题汇总

VUE常见面试题汇总

前言

少年不努力，以后做苦力

一、vue如何实现页面跳转

我们知道，在vue中每个页面都需要在路由中声明，就是在router/index.js中写下面代码：
代码如下（示例）：

import Vue from 'vue'
import Router from 'vue-router'
import Test from "../components/Test";
Vue.use(Router)
 
export default new Router({
  mode: 'history',
  routes: [
		  {
		      path: '/t',
		      name: 'Test',
		      component: Test,
		      hidden:true
		    },
    	]
    })

1.方法1在template中可以使用标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下：

<router-link to="/t?index=1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

<router-link :to="{path:'/t',query: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

2.方法2命名路由的方式：跳转的路径是http://localhost:8080/t?index=id该处使用的url网络请求的数据。

代码如下（示例）：

<router-link :to="{name:'Test',params: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

3.方法3在js中实现的跳转并传参的方法通过router.push

代码如下（示例）：

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t?index=1'});
            }
        }
    }
</script>

4.方法4在js中实现的跳转并传参的方法通router.replace()

代码如下（示例）：

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.replace({path: '/t?index=1'});
            }
        }
    }
</script>

二、vue中父子组件参数如何传递

1.父组件向子组件传值(props)父组件：FatherTest.vue代码如下（示例）：

<template>
  <div class="box">
    <h1>props:我是父组件</h1>
    <Child info="我是曹操" :money="money"></Child>
  </div>
</template>
<script setup lang="ts">
//导入子组件 props:可以实现父子组件通信,props数据还是只读的
import Child from "./Child.vue";
import { ref } from "vue";
//定义数据
let money = ref(8888);
</script>

子组件：Child.vue

<template>
  <div class="son">
       <h1>我是子组件:曹丕</h1>
       <p>{{props.info}}</p>
       <p>{{props.money}}</p>
  </div>
</template>
<script setup lang="ts">
//注意：
//1.需要使用到defineProps方法去接受父组件传递过来的数据
//2.defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
</script>

2、子组件向父组件传值(自定义事件)

子组件通过 emit 函数可以实现了子组件向父组件传值的功能
父组件：FatherTest.vue

<template>
  <div>
    <!--
        vue2框架当中:@click这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
        vue3框架下面写法其实即为原生DOM事件
        vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
      -->
    <!-- 绑定自定义事件child-event:实现子组件给父组件传递数据 -->
    <Child  @child-event="handler3" @click="handler4"></Child>
  </div>
</template>
 
<script setup lang="ts">
//引入子组件
import Child from './Child.vue';
 
//事件回调---4
const handler3 = (param1,param2)=>{
    console.log(param1,param2);
}
//事件回调--5
const handler4 = (param1,param2)=>{
     console.log(param1,param2);
}
</script>

子组件：Child.vue

<template>  
  <div class="child">  
    <p>我是子组件2</p>  
    <button @click="handler">点击我触发自定义事件child-event</button>  
    <button @click="emitClick">点击我触发自定义事件click</button>  
  </div>  
</template>  
  
<script setup>  
// 使用 defineEmits 声明可以触发的自定义事件  
const emit = defineEmits(['child-event', 'click']);  
  
// 按钮点击回调，触发 child-event  
const handler = () => {  
  emit('child-event', '参数1', '参数2');  
};  
  
// 另一个按钮点击回调，触发 click 事件  
const emitClick = () => {  
  emit('click', '小猫', '小狗');  
};  
</script>

总结

少年不努力，以后做苦力。