首页 > 其他分享> 文章详细

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

2021-01-24 17:00:38 阅读：115 来源： 互联网

标签：case vue 注册 kebab components 组件

说说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
  },
}

标签：case,vue,注册,kebab,components,组件
来源： https://blog.csdn.net/qq_45495857/article/details/113092516

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9