前端面试题之组件

1.组件通信的方式？

1.通过$ref引用

2.通过$parent/$children
3.通过$emit/props4.通过eventBus实现兄弟组件通信（$emit/$on）
5.通过vuex状态管理工具

2.keep-alive 的作用是什么

他是Vue内置一个组件，由它包裹的组件会被缓存起来，重新进入页面不会重新渲染

3.让css只在当前组件中起作用

在组件的style中添加scoped

4.如何获取dom

1.在对应的DOM 元素上添加ref属性：ref="refName";获取时：this.$ref.refName
2.querySelector()/querySelectorAll():后者返回的是一个集合（dom对象本身）
3.getElementById()/getElementsByClassName/getElementsByName/getElementsByTagName 
1
2
3

5.$nextTick的使用

在Vue 中，并不是数据发生变化后，dom立即发生变化。当修改了data的值，然后马上获取这个dom元素的值，是不能立即获取到更新后的值。
需要使用nextTick这个回调，让修改后的data渲染到dom元素之后再获取才能成功
$nextTick 在下次dom更新循环结束之后执行，在修改数据之后调用这个函数，可以立即获取更新之后的值

6.组件插槽

匿名插槽：子组件的插槽没有name属性，或name属性为default时，为匿名插槽
具名插槽：需要使用中的name属性绑定元素
使用slot="xxx"的形式，可以在任意元素标签上
使用v-slot:xxx的形式，只能定义在template元素上

7.监听组件生命周期

比如有父组件和子组件，父组件可在监听到子组件挂载mounted就做一些逻辑处理（this.$emit(‘addevent’)）。当然不仅可以监听mounted，还可以监听其他生命周期的时间，比乳created，updated
还有一种更简单的方法，子组件不需要做任何处理，在父组件引用的时候通过@hook:mounted=“addevent”

<Child @hook:mounted="addevent"/>
1

8.动态组件

Vue提供了一个方法来实现动态组件，也叫元组件。就是将组件动态的绑定到is特性上，依赖is的值来决定哪一个组件被渲染，最常见的就是tab切换

在这里插入代码片<template>
  <div class="hello">
    <h3>使用component 的 is特性</h3>
    <ul>
      <li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="changeView(index)">{{item}}</li>
    </ul>
    <component :is="currentView"></component>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
    currentView() {
      return this.arr[this.index];
    }
  },
  methods: {
    changeView(index) {
      this.index = index;
    }
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

9.如何在子组件更新父组件的值

1.使用$emit发送一个事件，父组件收到后修改
2.只要prop是对象或者数组，在子组件里面就可以修改从而改变父组件的值
3.使用vuex
4.通过.sync修饰符
该修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值，实际上就是一个语法糖。

<Child :money.sync="dataApp"/> 
//这里的money就是需要修改的值，子组件不需要其他改变。注意子组件里的prop：money
1
2

10.重新渲染组件

1.通过v-if的切换来销毁和重建dom节点
2.通过key值的改变重新渲染dom
3.通过this.$forceUpdate()强制更新

11.一个组件如何在多个项目中复用

1.npm 发包引用
2.npm link
3.npm 本地file引用：npm install …/commom/(相对路径)

开发一个组件的流程

写完组件之后应该在组件的index里引入
在使用到的地方进行注册引入