解读Vue组件注册方式


Posted in Vue.js onMay 15, 2021

概述

组件化的概念让前端页面开发有了更清晰的结构。

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组件注册方式的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
如何理解Vue简单状态管理之store模式
May 15 #Vue.js
Vue如何实现组件间通信
May 15 #Vue.js
详解Vue的sync修饰符
May 15 #Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
详解Vue的options
May 15 #Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 #Vue.js
Vue接口封装的完整步骤记录
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
对python sklearn one-hot编码详解
2018/07/10 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python二元表达式用法
2019/12/04 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
中秋节活动总结
2014/08/29 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Python os和os.path模块详情
2022/04/02 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android