当前位置：首页 > news >正文

Vue3》》组件继承 extends

news 2025/9/19 9:17:27

extends 选项式

跟Vue2 的extends 选项式用法一样

组合式 api 就是组合式函数 Hooks

基类逻辑 (useBase.js) - 这是一个组合式函数

// useBase.js - 这不是一个组件，而是一个可复用的逻辑函数
import { ref, onMounted } from 'vue';export function useBase() {const baseMessage = ref('Hello from Base Logic!');const baseCount = ref(0);function baseIncrement() {baseCount.value++;}onMounted(() => {console.log('Base logic mounted');});// 将需要暴露的变量和方法返回return {baseMessage,baseCount,baseIncrement};
}

》》子组件 (ChildComponent.vue) - 使用组合式函数

<template><div><p>{{ baseMessage }}</p><p>Child count: {{ childCount }}</p><button @click="baseIncrement">Base ++</button><button @click="childIncrement">Child ++</button></div>
</template><script setup>
import { ref } from 'vue';
// 导入并“组合”基类逻辑，而不是继承它
import { useBase } from './useBase';// 使用基类逻辑，并解构出其返回的内容
const { baseMessage, baseCount, baseIncrement } = useBase();// 子组件自己的逻辑
const childCount = ref(10);
const childIncrement = () => {childCount.value++;
};
</script>