Vue面试题05：Vue中如何扩展一个组件（应用题）

Vue中如何扩展一个组件

• 按照逻辑扩展和内容扩展来列举

  • 逻辑扩展的方法：mixins、extends、composition api
  • 内容扩展的方法：slots

• 使用方法、使用场景和问题

  • 混入：mixins是分发Vue组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件的选项对象。但在使用中，由于混入的数据和方法不能明确判断来源且可能与组件内变量发生命名冲突，vue3中不再建议使用，而是引入了composition api，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用，增强代码的可读性和维护性，来看对比：

    // 定义mixin对象
    const myMixin={
      created() {
        this.hello()
      },
      methods: {
        hello() {
          console.log("hello from mixin")
        }
      }
      // ...
    }
    // 局部混入:做数组项设置到mixins选项，仅作用于当前组件
    mixins:[myMixin]
    // 全局混入：慎用
    Vue.mixin(myMixin)
    

    //Vue3组合式函数
    //test.js
    import { ref, onMounted } from "vue"
    export function useMyfn() {
      // 被组合式函数封装和管理的状态
      const msg = ref("hello")
    
      onMounted(() => {
        hello()
      })
    
      function hello() {
        console.log(`${msg.value} from Myfn`)
      }
    
      return msg
    }
    
    //组件中使用
    <template>
      <div>{{msg}}</div>
    </template>
    
    <script setup>
    import { useMyfn } from "./hooks/test"
    const msg = useMyfn()
    </script>
    

  • 插槽：当有一个容器组件内容不确定，需要父组件分发扩展，就可以使用slot；

  • extends：不太常用：使一个组件可以继承另一个组件的组件选项，与mixins不同的是extends只能扩展单个选项，与同一组件的mixins发生命名冲突时它的优先级更高；