vue3 简单封装组件

来源：意榕旅游网

vue3 简单封装组件

在Vue3中，你可以使用组合API来封装组件。以下是一个简单的Vue3组件封装示例：

javascript复制代码:

import { ref, reactive } from 'vue';

export default { name: 'MyComponent', setup() {

const count = ref(0);

const state = reactive({ name: 'Vue3' });

const incrementCount = () => { count.value++; }; return { count, state,

incrementCount,

}; }, };

在上面的示例中，我们使用了Vue3的组合API，包括ref和reactive。ref用于创建响应式引用，而reactive用于创建响应式对象。在setup函数中，我们定义了组件的响应式数据、方法和属性，并返回它们以供模板中使用。

你可以在其他组件中使用这个封装好的组件，如下所示：

vue复制代码:

在上面的示例中，我们将MyComponent组件引入并在模板中使用它。我们可以访问组件的响应式数据和方法，并在模板中进行显示和交互。通过这种方式，你可以在Vue3中轻松地封装和重用组件。

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

{{ state.name }}