025.整理几个面试题——关于组件

Posted Composition55555

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.整理几个面试题——关于组件的主要内容，如果未能解决你的问题，请参考以下文章

025.整理几个面试题——关于组件

025.整理几个面试题——关于组件

021.整理几个面试题——关于Vue框架

021.整理几个面试题——关于Vue框架

021.整理几个面试题——关于Vue框架

024.整理几个面试题——关于Data