Vue 组件组织结构及组件注册详情

2024-12-03 08:06:16

1、组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如：我们可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

2、组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数

2.1 组件命名方式

定义组件名的方式有两种：

短横线分隔命名：my-component-name
首字母大写命名：MyComponentName

短横线分隔命名

Vue.component('my-component-name', { /* ... */ })

当使用 (短横线分隔命名) 定义一个组件时，使用时例如：<my-component-name></my-component-name>

首字母大写命名

Vue.component('MyComponentName', { /* ... */ })

当使用 (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

注意：尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有短横线分隔命名是有效的。

3、全局注册

全局注册就是使用Vue.component 来创建组件：

Java
Vue.component('my-component-name', {
  // ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的Vue根实例 (new Vue) 的模板中。

比如：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

但是全局注册实际项目中用的不多

4、局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript对象来定义组件：

let ComponentA = {
    template: `<p>hello</p>`
  }
let ComponentB = {
  template: `<p>world</p>`
}

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

当然实际开发过程中我们使用模块系统注册组件更多，这块后面再介绍

到此这篇关于Vue 组件组织结构及组件注册详情的文章就介绍到这了,更多相关Vue 组件组织结构及组件注册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue 组件注册全解析

全局组件注册语法 components中的两个参数组件名称和组件内容 Vue.component(组件名称, { data: 组件数据, template:组件模板内容 }) 全局组件注册应用组件创建: Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button&g
vue如何批量引入组件、注册和使用详解

前言组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册.这篇文章就来介绍下vue批量引入组件.注册和使用的方法. 一.使用场景在日常开发中,经常会有这样一种情况: import A from 'components/A' import B from 'components/B' import C from 'components/C' import D from 'components/D' 遇到这种重复的代码,就在想,是否可以进行以下优化,一次性全部引入.于是就找到了
vue 实现基础组件的自动化全局注册

参考官网:https://cn.vuejs.org/v2/guide/components-registration.html 在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次.则直接进行自动化全局注册. 自动化全局注册,官网上都详细的说明,以下是自己官网的说明基础上进行了一个demo开发实例: 1.自定义文件夹: 在src下新建一个components文件夹,用于存放组件.并新建一个用于存放需要自动化全局
详解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 中的组件就是一个 Vue 的实例对象.因此,Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是一样的,其可接收的构造选项都是一样的.除了 el 这样根实例特有的选项.但是,Vue 组件必须得是可以复用的,因此,就必须要求构造选项中的 data 选项必须是一个函数,该函数返回一个对象. 为什么 data 选项是个返回对象的函数就可以保证组件的可复用性呢? 因为无论是 new Vue() 的方式还是定义 V
Vue 组件注册实例详解

本文实例讲述了Vue 组件注册.分享给大家供大家参考,具体如下: 1 组件名在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数. 你给予组件的名字可能依赖于你打算拿它来做什么.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字
vue注册组件的几种方式总结

1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) 3.扩展实例 // 定义一个混合对象 var myMi
浅谈Vue组件及组件的注册方法

相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间.在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用. 那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子. 使用组件组件名大小写定义组件名的方
Vue 组件组织结构及组件注册详情

目录 1.组件的组织 2.组件名 2.1 组件命名方式 3.全局注册 4.局部注册 1.组件的组织通常一个应用会以一棵嵌套的组件树的形式来组织: 例如:我们可能会有页头.侧边栏.内容区等组件,每个组件又包含了其它的像导航链接.博文之类的组件. 为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别.这里有两种组件的注册类型:全局注册和局部注册. 至此,我们的组件都只是通过 Vue.component 全局注册的: Vue.component('my-component-name', {
详解vue 动态加载并注册组件且通过 render动态创建该组件

基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t
Vue.js 2.x之组件的定义和注册图文详解

前言什么是组件组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用全局组件的定义和注册组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注
VUE注册全局组件和局部组件过程解析

这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下全局组件第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'
vue activated在子组件中的使用详情

页面:base: <template> <div class="tab-container"> <h1 style="text-align: center"> 申请{{ form.category }}{{ form.companyType }}入驻 </h1> <div class="form-panel" style="margin-left: 20px;text-align:
在vue自定义组件中使用 v-model指令详情

目录一.前言 1.技术点提前知二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件三.优写时刻一.前言如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件
封装一个Vue文件上传组件案例详情

目录前言 1. 子组件 2 父组件使用 3.效果 4.总结前言在面向特定用户的项目中,引其他ui组件库导致打包体积过大,首屏加载缓慢,还需要根据UI设计师设计的样式,重写大量的样式覆盖引入的组件库的样式.因此尝试自己封装一个自己的组件,代码参考了好多前辈的文章 1. 子组件 <template> <div class="digital_upload"> <input style="display: none" @change=&
vue父组件向子组件(props)传递数据的方法

vue页面结构在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(