【大前端】说说vue的组件注册（全局注册和局部注册）

2024-04-04 14:34:47

说说vue的组件注册（全局注册和局部注册）

文章目录

说说vue的组件注册（全局注册和局部注册）

组件名规范

定义组件名的方式有两种

使用kebab-case:

Vue.component(‘my-component-name’, 组件）

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。

使用PascalCase

Vue.component(‘MyComponentName’,组件)

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说<my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册

例子基于vue-cli脚手架

语法：
在main.js中定义：

import HelloWorld from "./components/HelloWorld"
Vue.component('HelloWorld',HelloWorld);

vue文件中调用：

<div id="app">
	 <HelloWorld msg="Welcome to Your Vue.js App" />
</div>

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。
这造成了用户下载的 JavaScript 的无谓的增加。

在components下创建组件
在要使用组件的vue文件下，在js脚本下引入：

import ComponentName from "ComponentsName/path"

在export default下创建components分支。如下：

export default {
	components:{
		’componentName‘:ComponentName
	}
}

即可引用使用；
如果你将要定义的组件名与引入时的变量名一致；即可省略成以下内容：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
}

码农公寓