解读Vue组件注册方式

 更新时间:2021年05月15日 14:24:39   作者:lovin  
无论是Vue还是React,都有组件的概念。组件,就是能和别人组合在一起的物件。在前端页面开发过程中,将一个页面划分成一个个小的模块,每个模块单独定义,每个模块就是一个组件。组件可以进行复用,A页面和B页面有一个相似的模块,可以抽离成一个可局部修改的组件。

概述

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

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 设置路由的登录权限的方法

    vue 设置路由的登录权限的方法

    这篇文章主要介绍了vue 设置路由的登录权限的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 富文本编辑器quill.js 开发之自定义插件示例详解

    富文本编辑器quill.js 开发之自定义插件示例详解

    这篇文章主要为大家介绍了富文本编辑器quill.js 开发之自定义插件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue实现下载文件而非浏览器直接打开的方法

    Vue实现下载文件而非浏览器直接打开的方法

    对于浏览器来说,文本、图片等可以直接打开的文件,不会进行自动下载,下面这篇文章主要给大家介绍了关于Vue实现下载文件而非浏览器直接打开的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • elementUI实现级联选择器

    elementUI实现级联选择器

    这篇文章主要为大家详细介绍了elementUI实现级联选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue的样式绑定详解

    Vue的样式绑定详解

    这篇文章主要为大家详细介绍了Vue的样式绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    解决elementui中NavMenu导航菜单高亮问题(解决多种情况)

    这篇文章主要介绍了解决elementui中NavMenu 导航菜单高亮问题(解决多种情况),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue项目中跳转到外部链接的实例讲解

    vue项目中跳转到外部链接的实例讲解

    今天小编就为大家分享一篇vue项目中跳转到外部链接的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3.x中emits的基本用法实例

    vue3.x中emits的基本用法实例

    emits是Vue3新增的选项,emits主要作用在子组件中,用于接收在父组件中绑定的方法,这篇文章主要给大家介绍了关于vue3.x中emits的基本用法,需要的朋友可以参考下
    2022-07-07
  • Vue+Antv F2实现层叠柱状图

    Vue+Antv F2实现层叠柱状图

    这篇文章主要为大家详细介绍了Vue+Antv F2实现层叠柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue 不使用select实现下拉框功能(推荐)

    vue 不使用select实现下拉框功能(推荐)

    这篇文章主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用,需要的朋友可以参考下
    2018-05-05

最新评论