注册全局组件和局部组件

Posted 2023-04-08

参考技术A ①创建一个 PageTools文件夹 并同时创建一个 index.vue组件 文件

②就和我们平时使用普通组件一样，先在使用该组件的文件中 导入 ,在 compoents中注册 ，然后在 结构中使用

我们的业务组件一般都定义成了局部组件，使用的时候需要在components中注册，而我们全局通用组件一般是需要定义为全局组件的，不需要局部注册

①创建一个 PageTools文件夹 并同时创建一个 index.vue组件 文件

②直接在 main.js 中导入 index.vue 组件，给定组件名称以及组件的文件路径

③通过  Vue.component (组件名-字符串，导入时的组件名)  main.js

以上我们通过Vue.component全局api实现了全局注册，在业务组件中就 不需要再引入和注册 了， 直接在结构中使用即可。

介绍 ：它是Vue提供的一个静态方法，用来向Vue注册插件（增强Vue的功能）

之前学习中用到的场景

格式 ： Vue.use（obj）

原理：

Vue.use 可以接收一个对象，Vue.use(obj)

对象obj中需要提供一个 install 函数  在 main.js 中

Vue.component('组件名'， 组件对象)

在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

①创建一个 PageTools文件夹 并同时创建一个 index.vue组件 文件

②创建一个专门用来封装组件的文件（提供统一注册的入口文件 ） src/componets/index.js

③在main.js中注册插件，这里插件包含了文件中注册的所有组件，不是某一个

vue3注册全局组件在vscode中没有智能提示问题

参考技术A 原答案是我在stackoverflow中找到的： https://stackoverflow.com/questions/69010567/how-to-make-vscode-recognize-global-component-in-vue
在vue3中可以通过 create(App).component("MyButton", MyButton).mount("#app") 的方式注册全局组件，但是注册的全局组件在vscode中没有智能提示。
vue3文件的智能提示是volar提供的，其实在volar的 README
中有提到定义全局组件的方式：

注意这里MyButton不能使用动态导入（dynamic import），但如果是库可以动态导入，如README中示例的RouterLink。