025.整理几个面试题——关于组件
Posted Ruovan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了025.整理几个面试题——关于组件相关的知识,希望对你有一定的参考价值。
文章目录
关于组件
网上收集整理
01. 组件通信的方式?
-
通过
props / $emit
-
通过
ref
引用 -
通过
$parent / $children
-
通过
EventBus
事件总线$emit / $on
-
通过
$props / $attrs / $listeners
- 多级组件通信
-
通过
provide / inject
- 隔代组件通信
-
通过
Vuex
状态管理
02. 【keep-alive】的作用是什么?
keep-alive
是 Vue 内置的一个组件,可以使被包含的组件保留状态、进入缓存,避免重新渲染
03. 让CSS只在当前组件中起作用?
- 在组件中的
<style>
内部加上scoped
属性
04. 如何获取dom?
- 在对应的DOM元素上添加
ref
属性:ref="refName"
- 用法:
this.$refs.refName
- 用法:
05. 【$nextTick】的使用?
-
在Vue中,并不是数据发生变化之后,DOM立即发生变化,当修改了data的值,然后马上获取这个dom元素的值,是不能立即获取到更新后的值
-
需要使用
$nextTick
这个回调,让修改后的data值渲染更新到dom元素之后再获取,才能成功$nextTick
表示:在下次DOM更新循环结束之后执行- 在修改数据之后使用这个方法,可以立即获取更新后的DOM元素
this.$nextTick( () => // 在这里可以立即获取更新后的 属性值 )
06. 组件插槽
-
匿名插槽:当子组件的插槽
<slot>
没有name
属性,或者name
属性为default
时,即为匿名插槽 -
具名插槽:需要使用
<slot>
中的name
属性来绑定元素<slot> <!-- 没有命名的插槽内容将会显示在这个地方 --> </slot> <slot name="content"> <!-- 设置了名字的插槽则会显示在对应插槽名下 --> </slot> <!-- 使用:v-slot 或者 # 简写 --> <!-- 匿名插槽用 default 做参数 --> <template v-slot:default> 默认插槽,会显示在没有命名的插槽中 </template> <!-- 具名插槽用 插槽名做参数 --> <template #content> 会显示在对应插槽名下的插槽中 如果没有匹配的插槽名,则会显示在默认插槽中 </template>
注:
- 使用
slot="xxx"
的形式,可以在任意元素标签上 - 使用
v-slot:xxx
的形式,只能定义在template
元素上
- 使用
-
动态插槽:通过一个动态的属性来指定插槽名
-
作用域插槽:带数据的插槽、带参数的插槽,是子组件提供给父组件的参数,该参数仅限于该插槽中使用
07. 监听组件生命周期
-
比如有父组件
Parent
和子组件Child
,如果父组件监听到子组件挂载mounted
就做一些逻辑处理,常规的写法可能如下:// Parent.vue <Child @mounted="doSomething"/> // Child.vue <script> mounted() this.$emit("mounted"); </script>
-
还有一种特别简单的方式,子组件不需要任何处理,只需要在父组件引用的时候通过
@hook
来监听即可,代码重写如下:<Child @hook:mounted="doSomething"/>
-
当然这里不仅仅是可以监听
mounted
,其它的生命周期事件,例如:created
,updated
等都可以
08. 动态组件
-
Vue提供了一个方法来实现动态组件,也称为元组件
- 即:将组件动态绑定到
is
特性上,依靠is
的值来决定哪一个组件被渲染
<template> <component :is="component_name"></component> </template> <script> export default data() return // 动态组件 component_name: 'component1' // component2、component3... </script>
- 即:将组件动态绑定到
09. 如何在子组件更新父组件的值?
- 第一种方式:
props / $emit
- 第二种方式:传递引用类型的数据
- 第三种方式:通过
.sync
修饰符
10. 重新渲染组件
- 通过
v-if
的切换来销毁和重建DOM节点 - 通过
key
值的改变,来重新渲染DOM - 通过
this.$forceUpdate()
强制执行更新
以上是关于025.整理几个面试题——关于组件的主要内容,如果未能解决你的问题,请参考以下文章