vue -封装一个弹出层组件(组件之间的通信),2024大厂前端面试最火问题

37 阅读3分钟

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:docs.qq.com/doc/DSmRnRG…

1.引入组件


代码如下(示例):

组件之间引入页面中调用就可以使用了,难点在下边我们接着看

export default {

components: {

project:() => import ("@/components/project.vue")

}

}

在这里插入图片描述

2.读入数据


代码如下(示例):

点击新增时先通过watch 将

watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

但我们在数据变化时执行异步或者开销较大的操作时,应该使用watch

watch: {

PopupShowr() {

this.visible = this.PopupShowr;

}

通过调用调用接口显示数据,将获取的值传入到treedata中。

再使用子组件中的@node-click ="Selectsamplecategory"对数据进行点击次数的判断

判断鼠标点击的次数,单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件

Selectsamplecategory(data) {

console.log(data);

this.treeClickCount++;

if (this.treeClickCount >= 2) {

return;

}

this.timer = window.setTimeout(() => {

if (this.treeClickCount == 1) {

this.treeClickCount = 0;

} else if (this.treeClickCount > 1) {

this.treeClickCount = 0;

if (this.rightList.length == 0) {

this.rightList.push(data)

} else {

this.roleName = data;

var _this = this;

this.rightList.forEach((item) => {

if(_this.rightList.indexOf(_this.roleName) === -1 ){

_this.rightList.push(_this.roleName);

}

});

}

}

}, 300);

},

经过一系列的判断拿到值后再通过子组件将值传给父组件

在这里插入图片描述

父组件配置新增数据,将子组件传过的值进行遍历再通过调用接口实现新增

在这里插入图片描述

右侧的数据删除:

使用熟悉的splice 数组的前添后删 shift unshift push pop splice 多种用法可特意学习一下

deletelist(row){

this.rightList.foreach(item,index){

if(item == row) {

this.rightList.splice(index,1)

}

}

}


总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了vue的使用,而vue提供了大量能使我们快速便捷地处理数据方法。

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

html5