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

1、组件建立

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实例。

2、全局注册

（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规则（小写，而且包含一个短杠），尽管这被认为是最佳实践。

3、局部注册

（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、组件注册语法糖

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入门教程