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()强制执行更新