2024年Vue进阶（九十四）：自定义组件_前端 自定义组件，前端刷面试题的网站

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

JavaScript

在子组件中，接收和使用方法如下：

props: {
  searchList: Array,
  selectValue: Object
},
mounted() {
  this.data = this.searchList
},

在 props 中接收数据，注意props对象里面 键值 是对该接收数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则将警告。

而props对象中的数据，我们可以直接在当前组件中使用 this.searchList直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。

3.2 emit 的使用

前面实现了父组件向子组件传递数据，那子组件如何来修改父组件的数据呢？

这里提供 2 种实现方法，但是 第一种不推荐，强烈不推荐！

方式一：

selectValue: {
 data: '1'
},
　　　........................
this.selectValue.data = '我被修改了'

即，父组件将对象数据传递给子组件，子组件直接修改props过来的对象的值。

该方式可以实现子组件快速修改父组件的值，但是越权了！不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。

实现原理简单提一下： 这个对象、数组，是引用数据类型，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。

方式二：

通过 $emit() 去调用父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）

// 子组件
this.$emit('selectFunc', value)
// 父组件
<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

selectFunc(value) {
  this.selectValue2 = value
  console.log(this.selectValue)
  console.log(this.selectValue2)
}

将父组件的方法注入子组件 @selectFunc="selectFunc" ，然后在子组件中通过 $emit 调用，并传递参数，达到修改目的。

四、Demo

父组件：

<template>
    <section class="f-mainPage">
        <!--selectFunc 选择完成的回调 searchList 下拉列表的数据-->
        <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
    </section>
</template>

<script type="text/ecmascript-6">
  import Search from '../vuePlugin/search'
  export default {
    data() {
      return {
        searchList: ['草船借箭', '大富翁', '测试数据'],
        // 直接通过props传递对象 修改，挺便捷的,但是不规范
        selectValue: {
          data: '1'
        },
        // 通过emit修改，规范写法
        selectValue2: ''
      }
    },
    mounted() {},
    methods: {
      pageGo(path) {
        this.$router.push('/' + path)
      },
      selectFunc(value) {
        this.selectValue2 = value
        console.log(this.selectValue)
        console.log(this.selectValue2)
      }
    },
    components: {
      Search
    }
  }
</script>

子组件：

<template>
  <div v-for="item in data " v-on:click="choseValue(item)">{{item}}</div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        data: []
      }
    },
    props: {
      searchList: Array,
      selectValue: Object
    },
    mounted() {
      this.data = this.searchList
    },
    methods: {
      choseValue(value) {
        this.searchValue = value
        this.selectValue.data = '我被修改了'
        this.$emit('selectFunc', value)
      }
    }
  }
</script>

五、属性介绍

<template> 为HTML5发布后用来声明“模板元素”的标签。即HTML5之前使用<script type ="text/template">方式声明，而HTML5之后可用<template> 标签。

六、全局组件与局部组件

6.1 全局组件挂载

在main.js中全局注册到vue中。

import MyBread from '@/components/common/MyBread.vue'
Vue.component("MyBread", MyBread);//全局自定义组件

在需要需要引入的父组件中可以直接使用，

<MyBread level1="用户管理" level2="用户列表"></MyBread>

6.2 局部组件挂载

在需要需要引入的父组件中。

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

SS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-z4lrdjIy-1715359464141)]

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