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>
总结
少年不努力,以后做苦力。