专栏首页前端の进行时Vue.js入门教程-组件注册

Vue.js入门教程-组件注册

一、组件创建

1.1 创建步骤

创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。

1.2 基本示例

比如,我们创建一个Button组件。

// 1. 创建一个组件构造器 
let myButton = Vue.extend({ 
    // 模板选项
    template: `<button>点击我</button>` 
}) 

// 2. 注册组件,并指定组件的标签,组件的HTML标签为<my-button> 
Vue.component('my-button', myButton) // 组件名 构造器

// 创建Vue实例 
let app = new Vue({ 
    el: '#app' 
}) 
<!-- 3. #app是Vue实例挂载的元素 --> 
<div id="app"> 
    <my-button /> 
</div>

1.3 说明

(1)Vue.extend() 是Vue构造器的扩展,调用 Vue.extend() 创建的是一个组件构造器

(2)Vue.extend() 构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的HTML,简单的理解这个属性用来定义组件的模板(也就是组件的HTML结构);

(3)使用 Vue.component() 注册组件,在注册组件时需要提供两个参数,第一个参数是组件的标签(my-button),第二个参数是组件构造器(myButton);

(4)组件应该挂载到Vue实例,否则不会生效。这一点需要特别的注意。另外同一个组件可以同时挂载到多个Vue实例。

二、全局注册

(1)我们使用 Vue.component(tagName, options) 可以注册一个全局的组件,也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

let myButton = Vue.extend({ 
    template: `<button>点击我</button>` 
}) 

Vue.component('my-button', myButton) 

(2)如上写法,我们也可以简写为

Vue.component('my-button', { 
    template: `<button>点击我</button>` 
})

(3)组件注册之后,便可以作为自定义元素 <my-button />,在一个实例的模板中使用。【注意】在初始化根实例之前注册组件

<div id="app"> 
    <my-button /> 
</div>

(4)【注意】对于自定义标签的命名,Vue不强制遵循W3C规则(小写,并且包含一个短杠),尽管这被认为是最佳实践。

三、局部注册

(1)通过某个Vue实例/组件的实例选项 components 注册,使用该选项注册的组件被称为局部注册。

let myButton = Vue.extend({ 
    template: `<button>点击我</button>` 
})

let app = new Vue({ 
    el: '#app',
    components: {
        'my-button':myButton
    }
}) 
<div id="app"> 
    <my-button /> 
</div>

(2)得到的效果和注册全局组件是一样的。不同的是,如果你在另一个Vue实例中调用注册的局部组件,该组件不会生效。比如在app2这个实例中调用app中注册的组件my-button,就不会生效。

<div id="app2"> 
    <my-button /> 
</div>

四、组件注册语法糖

4.1 作用

以上组件注册的方式有些繁锁,Vue为了简化组件注册的过程,提供了注册语法糖。

4.2 全局注册写法

(1)使用 Vue.component() 直接创建和注册组件

// 注册全局组件 my-button
Vue.component('my-button', { 
    template: `<button>点击我</button>` 
})

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

(2)Vue.component() 的第一个参数是组件标签名称,第二个参数是一个选项对象,使用选对象的 template 属性定义组件模板

(3)使用这种方式,Vue在背后会自动调用 Vue.extend()来创建组件构造器。

4.3 局部注册写法

(1)在选项对象 components 属性中注册局部组件的语法糖。

let app = new Vue({ 
    el: '#app',
    components: {
        'my-button': {
            template: `<button>点击我</button>` 
        }
    }
})

(2)【注意】尽管注册组件的语法糖简化了组件注册,但在template选项中拼接HTML元素还是相当的麻烦,尽管ES6的语法让事情变得简单了不少,但也将导致HTML和JavaScript的高耦合性

(3)【其他方式】庆幸的是,Vue除了上面这些语法糖之外,还提供了如下的方式。

Vue.component('my-button', { 
    template: '#my-button' 
})
<template id="my-button">
    <button>点击我</button>
</template>

更多系列文章在GitHub的地址 Vue.js入门教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js入门教程-组件数据传递

    (1)组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例...

    WEBING
  • jQuery入门教程-文档操作方法

    (2)不同之处 内容和选择器的位置不同,以及 append() 能够使用函数来附加内容。

    WEBING
  • JavaScript-For 循环和 While 循环

    一个for循环会一直重复执行,直到指定的循环条件为fasle。 JavaScript的for循环和Java与C的for循环是很相似的。

    WEBING
  • Vue:基于Vue2的饿了么实战总结

    MrTreasure
  • Mariadb/MySQL存储过程中的3

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环。还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用...

    py3study
  • 热点 | 最新!国务院常务会议通过电子签名法修正草案

    据中国政府网消息,国务院常务会议于4月3日召开,会议通过了包括《电子签名法》在内的一批法律修正案草案(下称“修正案”),修改建议其中包括:允许在办理土地、房屋等...

    法大大电子合同
  • 在线营销获得高质量线索的秘密

    大多数数字营销活动,包括搜索引擎优化(SEO),点击付费(PPC),展示广告,以及其它数字营销方式都无法很好的验证转化率。这成了销售团队的额外负担,降低了生产率...

    臭豆腐
  • 2018年关于人工智能、大数据和分析的十大预测

    人工智能已经流行了很长一段时间。但据预测,随着新年的到来,人工智能、大数据和分析等最新技术需要做出改进,以提供更好的性能。升级后的界面还将有助于增强机器与人的协...

    人工智能快报
  • 独家丨大数据或许能让“长命百岁”成为现实

    来源:数据猿 作者:mifeng jinyounan ---- 在近日举办的一次论坛上,有美国知名科学家表示,医学界正在悄然掀起一场革命:依靠缜密的大数据分析与...

    数据猿

扫码关注云+社区

领取腾讯云代金券