vue-05Vue中扩展⼀个组件

• 1. 常用的组件扩展⽅法有：mixins，slots，extends等
• 2. 混⼊mixins是分发 Vue 组件中可复⽤功能的⾮常灵活的⽅式。混⼊对象可以包含任意组件选项。当组件使⽤ 混⼊对象时，所有混⼊对象的选项将被混⼊该组件本身的选项。

// 复⽤代码：它是⼀个配置对象，选项和组件⾥⾯⼀样 
const mymixin = { 
  methods: { 
    dosomething(){} 
  } 
} 
// 全局混⼊：将混⼊对象传⼊ 
Vue.mixin(mymixin) 

// 局部混⼊：做数组项设置到mixins选项，仅作⽤于当前组件 
const Comp = { 
  mixins: [mymixin] 
}

• 3. 插槽slot主要⽤于vue组件中的内容分发，也可以⽤于组件扩展。如果要精确分发到不同位置可以使⽤具名插槽，如果要使⽤⼦组件中的数据可以使⽤作⽤域插槽。

• 4.组件选项中还有⼀个不太常⽤的选项extends，也可以起到扩展组件的⽬的

// 扩展对象 
const myextends = { 
  methods: { 
    dosomething(){} 
  } 
} 
// 组件扩展：做数组项设置到extends选项，仅作⽤于当前组件 
// 跟混⼊的不同是它只能扩展单个对象 
// 另外如果和混⼊发⽣冲突，该选项优先级较⾼，优先起作⽤ 
const Comp = {
  extends: myextends
}

• 5. 混⼊的数据和⽅法不能明确判断来源且可能和当前组件内变量产⽣命名冲突，vue3中引⼊的composition api，可以很好解决这些问题，利⽤独⽴出来的响应式模块可以很⽅便的编写独⽴逻辑并提供响应式的数据， 然后在setup选项中组合使⽤，增强代码的可读性和维护性。例如：

// 复⽤逻辑1 
function useXX() {} 
// 复⽤逻辑2 
function useYY() {} // 
逻辑组合 
const Comp = { 
  setup() { 
    const {xx} = useXX() 
    const {yy} = useYY() 
    return {xx, yy} 
  }
}

了解一下：Vue.extend⽅法，它能⽤来做组件扩展吗？

• 创建构造器，它继承自vue
• 现在用传送门 teleport