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,其它的生命周期事件,例如:createdupdated等都可以

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