解读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+iview实现文件上传
Nov 17 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue封装数字翻牌器
Apr 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
基于MySQL体系结构的分析
2013/05/02 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
原生js实现日历效果
2020/03/02 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
在Python中使用正则表达式的方法
2015/08/13 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python输入二维数组方法
2018/04/13 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
大学信息公开实施方案
2014/03/09 职场文书
抽样调查项目计划书
2014/04/24 职场文书
领导班子整改措施
2014/10/24 职场文书
关于车尾的标语大全
2015/08/11 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
React如何创建组件
2021/06/27 Javascript