Vue3非模版组件二次封装怎么继承属性

Vue3中，非模板组件（也称为自定义渲染函数组件或Composition API组件）的继承通常不是通过传统的HTML元素标签来完成的，而是通过Composition API提供的API来实现。如果你想要继承属性，可以考虑以下几个步骤：

1. **组合式数据和方法**：在父组件中，你可以定义公共的数据和方法，然后在子组件中通过`setup`钩子去使用它们，就像继承一样。

// 父组件
export default {
  data() {
    return {
      sharedData: '这是共享数据'
    };
  },
  methods: {
    sharedMethod() {
      console.log('这是共享方法');
    }
  }
}

2. **子组件使用**：在子组件的`setup`钩子里，通过`import { ref, onMounted } from 'vue'`导入必要的工具，并使用它们来接收和使用父组件的属性或方法。

// 子组件
import { ref, onMounted } from 'vue';

export default {
  setup(props, context) {
    const parentData = ref(context.parent?.$data.sharedData); // 如果父组件存在则获取

    // 使用父方法
    onMounted(() => {
      context.parent.sharedMethod(); // 调用父方法
    });

    return {
      parentData,
      // ...其他子组件特有的状态和行为
    };
  }
}