vue3 封装一个组件的方法步骤如下
创始人
2024-06-02 07:07:21

1、首先建一个HelloWorld.vue其中的内容如下：

2、再新建一个js文件，这里我起名为helloworld.js内容为：

// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展import HelloWorld from "@/components/HelloWorld.vue";
export default {install (app) {// 在app上进行扩展，app提供 component directive 函数// 如果要挂载原型 app.config.globalProperties 方式app.component(HelloWorld.name, HelloWorld)}
}

3、再main.js中使用插件，内容如下：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'// 就是下边这一行，将其导入然后挂载到app上
import ui from './helloworld'
// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(ui).mount('#app')

4、再App.vue中使用组件

5、效果如下：

在这里插入图片描述

上一篇：对于单例模式以及静态局部变量的深入理解（C++）

下一篇：小程序当前页面如何分享别的页面内容呢？

相关内容

热门资讯

12306推出旅客误购限时免费... 据中国铁路消息，1月19日起，铁路12306平台（含网站、App等，下同）推出旅客误购限时免费退票服...
新华财经早报：1月18日 转自：新华财经•中国航发“太行三兄弟”完成评估验收 将有力带动相关行业产业化、商业化发展•两部门：商...
北京颐和园昆明湖邀您畅滑16万... （来源：千龙网）1月17日，颐和园昆明湖冰场正式开放，辽阔的天然冰面与万寿山、佛香阁等古典建筑遥相呼...
幸福“食”光里的幸福时光 启航小学的学生享用美味可口的午餐。省教育厅供图临近中午时分，海北藏族自治州门源回族自治县启航小学新改...
观察者网2026答案秀｜全球A... 2026年1月17日，观察者网“2026答案秀·思想者春晚”在各大平台同步直播。财经评论员刘戈与中国...