浅谈Vue组件及其注册方法

相信很多人在使用vue进行项目开发的时候都会接触到Vue组件，最常见的就是element-ui组件库，使用起来真的很方便，大大减少了我们的开发时间。事实上，一个项目中有许多可重用的代码块。如果我们可以将这些内容打包到一个组件中，我们就可以轻松地重用它们。

那么Vue组件是什么呢？它是Vue.js最强大的功能之一，是一个可扩展的html元素，是一个封装的可重用代码，也是Vue的一个实例，它可以接受相同的选项对象(除了一些根级别的唯一选项)并提供相同的生命周期钩子。

使用组件

组件名称的大小写

有两种方法可以定义组件名称：

使用烤肉串盒

vue.component(' my-component-name '，{/*.*/})使用烤肉串定义组件时，引用此自定义元素时，也必须使用烤肉串，例如my-component-name。

使用PascalCase

Vue。组件('我的组件名'，{/*.*/})使用PascalCase(驼峰命名)定义组件时，可以在引用此自定义元素时同时使用这两种命名方法。也就是说，我的组件名和我的组件名都是可以接受的。但是，请注意，当直接在DOM中使用时，只有kebab-case是有效的(也就是说，模板不是字符串)。

组件的注册可以分为全局注册和局部注册。

全球注册

我们已经知道如何创造一个虚拟现实

New Vue({ el: '#app '，//options})可以使用Vue.component(tagName，options)注册全局组件。例如

上面是一个最简单的全局注册的例子(' my-apprvuser '，{template3360 ' '，data : function(){ return } }//option })，但实际上我们不会这样使用。以vue-cli为脚手架工具。我们将单独创建一个vue文件来封装一个组件。这里我们创建一个apprvUser.vue文件

文件结构与普通的vue文件相同，它包含我们想要封装的组件

然后在我们的main.js文件(也是门户文件)中注册全局组件

//注册审阅者(应用程序)组件从“”导入apprvuser。/view/audit/apprvuser ' vue.component(' my-apprvuser '，apprvuser)在这里，要注意引用vue文件的正确路径，这样全局注册后就可以直接在其他组件中使用组件my-apprvuser/my-apprvuser。

本地注册

部分注册是在你想使用的vue文件中注册和导入。vue官网api中有一个简单的例子，大家可以看一下，但是我们在实际中基本不会用到。

或者以上述文件apprvUser.vue为例。

我将这个组件注册在这个文件的同一个目录下的另一个vue文件中，并将这个组件注册在export default的一个选项components中。

这是本地组件的注册，可以在当前文件中使用，但不能直接在其他组件中使用。要在其他组件/vue文件中使用此组件，它必须在全局或本地注册。

//注册的审阅者(应用程序)组件导入apprvuser from“”。/apprvuser ' export default { components : { ' my-apprvuser ' : apprvuser }，}以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。