解读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实现购物车的小练习
Dec 21 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
Python程序语言快速上手教程
2012/07/18 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
数据库方面面试题
2012/04/22 面试题
酒店出纳岗位职责
2013/12/29 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
企业承诺书格式
2014/05/21 职场文书
2015元旦标语横幅
2014/12/09 职场文书
九华山导游词
2015/02/03 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android