vue3 如何使用Vue.extend

Vue 3是一种流行的JavaScript框架，用于构建用户界面。Vue.extend是Vue 3中的一个方法，用于创建可复用的组件。

使用Vue.extend方法可以创建一个Vue组件的子类，该子类可以被多次实例化并在应用程序中重复使用。下面是使用Vue.extend的步骤：

1. 导入Vue和Vue.extend：

import { createApp, Vue } from 'vue';

2. 使用Vue.extend创建组件子类：

const MyComponent = Vue.extend({
  // 组件的选项
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

3. 创建组件实例：

const app = createApp({});
const myComponentInstance = new MyComponent();

4. 将组件实例挂载到DOM元素上：

myComponentInstance.$mount('#app');

现在，你可以在DOM中使用该组件了：

<div id="app">
  <my-component></my-component>
</div>