Vue中如何注册全局组件和局部组件(详解)

Posted 2021-09-03 HZM_无止境

---

Vue 注册组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法 (优点:多次使用,方便省事)，而使用局部组件的情况比较少(除需要专供特定页面)。

注册全局组件:

当你注册完之后，可以在任何组件中直接使用标签，而不需要在各个组件中引入并局部注册 通常公共组件放在src文件夹下的components文件夹中，这里的组件进行全局注册。

方法步骤:

1、在src文件夹中新建components文件夹，components文件夹中一般存放组件文件.
2、在文件夹中新建components.js文件
3、在components.js文件引入所有要注册的全局组件
4、在main.js中引入components.js文件并使用Vue.use()全局注册

代码演示: -components.js文件中

import 组件名字A from \'@/components/组件名字A\' 
import 组件名字B from \'@/components/组件名字B \' 

export default (Vue)=>{
  Vue.component("组件名字A", 组件名字A )  // 前者必须是字符串格式
  Vue.component(\'组件名字B\', 组件名字B )  
}

在main.js引入插件

import components from \'@/components/components.js\'

Vue.use(components)

new Vue({
  // ...
})

全局组件的使用(直接使用)

<组件名称></组件名称>

---

注册局部组件:

页面中私有的组件放在各自的页面文件夹中并使用下面代码局部注册

import ComponentA from \'./ComponentA\'
import ComponentB from \'./ComponentB\'
export default {
  name: "part",
  components: { ComponentA, ComponentB },
}