前端面试题之组件
1.组件通信的方式？
1.通过
r
e
f
引用
2.
通过
ref引用 2.通过
ref引用2.通过parent/
c
h
i
l
d
r
e
n
3.
通过
children 3.通过
children3.通过emit/props
4.通过eventBus实现兄弟组件通信（
e
m
i
t
/
emit/
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
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"/>
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>
9.如何在子组件更新父组件的值
1.使用$emit发送一个事件，父组件收到后修改
2.只要prop是对象或者数组，在子组件里面就可以修改从而改变父组件的值
3.使用vuex
4.通过.sync修饰符
该修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值，实际上就是一个语法糖。
<Child :money.sync="dataApp"/>
//这里的money就是需要修改的值，子组件不需要其他改变。注意子组件里的prop：money
10.重新渲染组件
1.通过v-if的切换来销毁和重建dom节点
2.通过key值的改变重新渲染dom
3.通过this.$forceUpdate()强制更新
11.一个组件如何在多个项目中复用
1.npm 发包引用
2.npm link
3.npm 本地file引用：npm install …/commom/(相对路径)
开发一个组件的流程
写完组件之后应该在组件的index里引入
在使用到的地方进行注册引入