Vue中如何扩展⼀个组件

Vue中如何扩展⼀个组件

按照逻辑扩展和内容扩展来列举:
逻辑扩展有：mixins、extends、composition api；
内容扩展有: slots；

一、Mixin

组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取,
vue3中支持使用composition api

1.如果是data函数的返回值对象

• 返回值对象默认情况下会进行合并
  如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据

2.如何生命周期钩子函数

• 生命周期的钩子函数会被合并到数组中，都会被调用
  先执行Mixin中对应的逻辑，在执行组件中对应生命周期钩子的逻辑

3.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象

• 比如都有methods选项，并且都定义了方法，那么它们都会生效
  但是如果对象的key相同，那么会取组件对象的键值对

4.全局混入

const app = createApp(App)
app.mixin({
  created() {
    console.log('全局混入')
  }
})
1
2
3
4
5
6

5.局部混入

export default {
  name: 'App',
  // 一个组件可以混入多个，所以mixins所对应的值是一个对象
  mixins: [fooMixin]
}
1
2
3
4
5

二、extends

从实现角度来看，extends 几乎和 mixins 相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、composition api

1.composition API 对比 mixin

mixin缺点：

• 渲染上下文中使用的属性来源不清晰。（例如在阅读一个运用了多个 mixin 的模板时，很难看出某个属性是从哪个 mixin 中注入的）

• 命名空间冲突。（mixin 之间的属性和方法可能有冲突）

composition API优点

• 暴露给模板的属性来源十分清晰，因为它们都是被组合逻辑函数返回的值
• 不存在命名空间冲突，可以通过解构任意命名
• 不需要为逻辑复用创建组件实例（不理解）
• 仅依赖它的参数和 Vue 全局导出的 API，而不依赖 this 上下文（不理解）

1、composition api-代码提取

让我们使用Composition API重构上面定义的组件，以使我们定义的功能位于JavaScript模块 useCounter 中（在特性描述前面加上“use”是一种Composition API命名约定）

//useCounter.js
import { ref, computed } from "vue";
export default function () {
  const count = ref(0);
  const double = computed(() => count * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、composition api代码重用

// MyComponent.js
import useCounter from "./useCounter.js";
 
export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

四、slot
vue3中废除slot、slot-scop，
slot替换成v-slot:插槽名，v-slot简写为#，
slot-scop替换成v-slot:xxx=“slotProps”