解读Vue组件注册方式
概述
组件化的概念让前端页面开发有了更清晰的结构。
Vue 中的组件就是一个 Vue 的实例对象。因此，Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是一样的，其可接收的构造选项都是一样的。除了 el 这样 根实例 特有的选项。但是，Vue 组件必须得是可以复用的，因此，就必须要求构造选项中的 data 选项必须是一个函数，该函数返回一个对象。
为什么 data 选项是个返回对象的函数就可以保证组件的可复用性呢？
因为无论是 new Vue() 的方式还是定义 Vue组件 的方式创建一个 Vue 实例，其执行的操作都是将构造选项中的各属性值直接赋值给新创建的 Vue 实例对象。组件复用就是 Vue 使用 相同的构造选项 构造出多个同名不同地址的 Vue 实例对象。如果 Vue 组件定义时的构造选项中的 data 选项是一个对象，那么在组件复用时，多个组件就会共用一个 data 数据对象，因为是直接将 data 对象的地址赋值给组件的 Vue 实例的。但如果组件定义时的 data 选项是一个函数的话，那么 Vue 根据构造选项创建组件时会执行该函数从而得到一个对象。这样一来，每次创建 Vue 实例时的 data 对象都是重新生成的，因此，多个组件都有各自的 data 数据对象，不会相互影响。
实际上，在组件注册时是在定义组件的构造选项，在组件使用时才真正创建对应的 Vue 组件实例。
1 、全局注册
全局注册的组件可以在 Vue 根实例和所有的子组件中使用。注册入口为Vue.component()函数，一次注册，随时使用，注册方式如下：
Vue.component('my-component-name',{
options
})
示例如下：
//main.js
//此示例是在 vue-cli 创建的项目，默认是非完整版vue，无法用 template 选项，因此使用 render 函数写组件内容。
Vue.component('all-test',{
data(){
return {
x: '我是全局组件'
}
},
render(h){
return h('div',this.x)
}
})
//全局注册的组件直接使用即可
//App.vue
<template>
<div id="app">
<all-test />
</div>
</template>
2 、局部注册
局部注册是通过一个普通的 JavaScript 对象来定义组件。然后组件的命名和注册入口是在 Vue实例 构造选项中的 components 选项。
let component = { options }
//new Vue 创建的根元素 Vue 实例
new Vue({
el: '#app'
components: {
'my-component-name': component
}
})
//或注册 Vue组件 创建的 Vue 实例
export default {
components: {
'my-component-name': component
}
}
示例如下：
//App.vue
<template>
<div id="app">
<all-test />
<component-a />
<component-b />
</div>
</template>
<script>
let ComponentA = {
data(){
return {
x: '我是局部组件 A'
}
},
render(h){
return h('div',this.x)
}
}
export default {
name: 'App',
components: {
'component-a': ComponentA,
'component-b': {
data(){
return {
x: '我是局部组件 B'
}
},
render(h){
return h('div',this.x)
}
}
}
}
</script>
3 、模块系统中局部注册
在使用了诸如 Babel 和 webpack 的模块系统中可以使用 import 和 export 的方式单独导入组件的构造选项对象 或者 导入对应构造选项的 *.vue 文件。
//c.js
export default {
data(){
return {
x: '我是 c.js 文件单独导出的组件构造选项对象'
}
},
render(h){
return h('div',this.x)
}
}
//D.vue
<template>
<div>
{{x}}
</div>
</template>
<script>
export default {
data(){
return {
x: '我是 D.vue 文件导出的组件'
}
}
}
</script>
//App.vue
<template>
<div id="app">
<C />
<D />
</div>
</template>
import C from './c.js'
import D from './components/D.vue'
export default {
name: 'App',
components: {
C,
D
}
}
</script>
以上就是解读Vue组件注册方式的详细内容，更多关于Vue组件注册方式的资料请关注我们其它相关文章！
相关推荐
-
vuex 动态注册方法 registerModule的实现
Vuex(2.3.0+)可以用store.registerModule方法在进入路由时进行注册,离开路由时候销毁 actions, mutations, getters, state,在一定范围内相同名称不会被覆写 例子 index.js 传this 的写法 module.exports = { install(_this) { _this.$store.registerModule(['abc'], { namespaced: true, state: { rightTest: 999 },
-
详解vue 组件注册
一.了解组件注册的两种方式 1.1 全局组件的注册方法 //main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false let Hello = { name: 'hello', template: '这是全局组件hello' } Vue.component('hello', Hello) new Vue({ el: '#ap
-
Vue 组件注册实例详解
本文实例讲述了Vue 组件注册.分享给大家供大家参考,具体如下: 1 组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数. 你给予组件的名字可能依赖于你打算拿它来做什么.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范 中的自定义组件名 (字
-
Vue封装的组件全局注册并引用
当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情. 每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可. 那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入). 如何封装组件就不多赘述了. 参考vue官网的做法:vue官网全局注册 1.正则判断路径以及文件名,获取全部组件并全局注册(可以直
-
vue登录注册实例详解
步骤一 1.安装脚手架:npm install vue-cli -g 2.wepack生成html模版:vue init webpack ' 文件名' 3.安装axios.js-cookie.element-ui.stylus等等常用插件 步骤二 1.在main.js中引入router.element-ui等 import Vue from 'vue' import store from './store' //可以先忽略 import App from './App' import route
-
Vue源码解读之Component组件注册的实现
什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. Vue可以有全局注册和局部注册两种方式来注册组件. 全局注册 注册方式 全局注册有以下两种
-
Vue动态创建注册component的实例代码
前言 在深入了解Vue动态创建Component前先了解一下常规组件声明形式. Vue 的组件通常可以通过两种方式来声明,一种是通过 Vue.component,另外一种则是 Single File Components(SFC) 单文件组件 . 常规组件声明与注册 // 定义一个名为 button-counter 全局注册的组件 Vue.component("button-counter", { template: '<button v-on:click="count
-
VUE注册全局组件和局部组件过程解析
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'
-
Vue 组件注册全解析
全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用 组件创建: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button&g
-
解读Vue组件注册方式
概述 组件化的概念让前端页面开发有了更清晰的结构. Vue 中的组件就是一个 Vue 的实例对象.因此,Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是一样的,其可接收的构造选项都是一样的.除了 el 这样 根实例 特有的选项.但是,Vue 组件必须得是可以复用的,因此,就必须要求构造选项中的 data 选项必须是一个函数,该函数返回一个对象. 为什么 data 选项是个返回对象的函数就可以保证组件的可复用性呢? 因为无论是 new Vue() 的方式还是定义 V
-
Vue自动化注册全局组件脚本分享
目录 自动化注册全局组件 放代码 vue组件注册–全局注册 使用require.context实现前端工程自动化(实现全局组件自动化注册的js脚本) 基本思路 使用场景 自动化注册全局组件 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比如components下的文件,自动完成全局化注册,想起来就很帅 放代码 export function au
-
Vue组件之全局组件与局部组件的使用详解
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l
-
深入解析Vue 组件命名那些事
There are only two things in Computer Sciences: cache invalidation and naming things. -- Phil Karlton 诚如上述所言,编程中变量命名确实令人很头疼.我们模糊地知道,Vue 组件的名称最好不要和原生 HTML 标签相同.为了避免重名,通常会在组件名称前面加上一个前缀,如 el-button.el-input.el-date-picker.这通常不会有什么问题,但有时候你的模板中混杂了原生 HTML
-
vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包,尤其是本地引用 3.vue组件的两种引用方案 一.发布一个包到npm的步骤 在npmjs.org上注册一个账号 然后进入命令提示窗口输入: npm adduser: 进入添加用户 Username your name: 设置用户名 Password your password: 设置密
-
vue组件表单数据回显验证及提交的实例代码
最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现. 代码如下: <template> <div class="index"> <!--header-bar></header-bar--> <div style="margin:20px;"> <div class="item"> <p>住户名称:</p>