当前位置：首页 > news >正文

面试学习准备

news 2024/11/27 9:43:34

根据面试题web前端面试 - 面试官系列里面的题目学习巩固。

1.vue2

组件通信

EventBus：

讲解

全局事件总线，核心思想是通过发布-订阅模式来实现组件之间的通信

在 Vue 2 中，可以直接使用 Vue 实例作为 EventBus。

使用方法：在mian.js中直接挂载到vue原型上。

const bus = new Vue();

Vue.prototype.$bus = bus

然后组件通过 this.$bus来访问

用$emit发送事件
this.$bus.$emit('customEvent', { message: 'Hello from Component A' });
用$on接收事件
this.$bus.$on('customEvent', (payload) => {
console.log('Received:', payload.message);
});

项目中的真实用法：

项目顶部导航栏点击模块高亮效果

1.//比如：在有导航栏的页面点击导航栏的首页 （页面路径：src\pages\home\index.vue）
methods:{
this.$router.push({name: "newIndex"
});
}2.//跳转到index首页页面 （页面路径：src\pages\home\newIndex.vue）
beforeMount() {this.$root.Bus.$emit("changeTab", 'first');
},
在这个页面中用$bus.$emit传递数据给导航栏页面3.还是导航栏页面接收参数（页面路径：src\pages\home\index.vue）
mounted(){
this.$root.Bus.$on("changeTab", e => {this.activeName = e; //this.activeName 控制导航栏文字是否高亮localStorage.setItem('activeName', e) //此时e就是上面传递的'first'
});
}

NextTick

Vue 中 DOM 更新是异步的，数据更新后页面的 DOM 可能还没完成更新，因此在需要操作最新 DOM 时，可以使用 this.$nextTick 确保数据变化引起的 DOM 更新完成后再执行代码。

this.$nextTick 的使用场景主要是需要操作更新后的 DOM，而不仅仅是简单的页面渲染。简单的数据绑定渲染，Vue 会自动处理好，根本不需要用到 nextTick。只有当数据变化后，你有一些额外的逻辑需要依赖最新的 DOM 状态，才需要使用它。

所以，nextTick 本质上是为了解决数据变化和 DOM 更新之间的异步关系，确保操作发生在 DOM 更新完成之后，而不是专门为页面渲染而存在。

插槽slot

插槽重点：父组件向子组件传递内容

分类：

1.默认插槽 <slot></slot> 用于插入父组件的内容

2.具名插槽（多个插槽）通过 name 属性指定内容插入的位置，父组件用 #插槽名 提供内容。

3.作用域插槽：（父组件还能拿到子组件提供的数据）子组件通过插槽把数据传递给父组件，父组件用 v-slot 接收数据。

father.vue

<template><div><!-- 默认插槽 --><child><div>我是父组件给你传递的数据：父亲</div></child><!-- 具名插槽 --><child><template #name>我是具名插槽name</template><template #age>我是具名插槽age</template></child><!-- 作用域插槽  父组件用v-solt 接收子组件传递过来的数据 --><child v-solt="{info}"><div>父组件展示子组件的数据：{{ info }}</div></child></div>
</template><script>
import child from "./child";

<template><div><!-- 默认插槽 --><slot></slot><!-- 具名插槽 --><div><span>姓名：</span><slot name="name"></slot></div><div><span>年龄：</span><slot name="age"></slot></div><!-- 作用域插槽  子组件传递给父组件的数据 --><slot :info="info"></slot></div>
</template><script>
export default {name:'', components: {},data () {return {info:'我是子组件传递给父组件的数据 作用域插槽'}

axios封装

安装和导入

npm install axios --s

在main.js中

import axios form ‘axios’

发送请求

axios({        url:'xxx',    // 设置请求的地址method:"GET", // 设置请求方法params:{      // get请求使用params进行参数凭借,如果是post请求用datatype: '',page: 1}
}).then(res => {  // res为后端返回的数据console.log(res);   
})