Vue.js组件使用开发实例教程

组件

组件可以扩展HTML元素，封装可重用的代码，在较高的层面上，组件是自定义元素，vue.js的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

Vue.js的组件可以理解为预先定义好了行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：

模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。

接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。

方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。

生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。

私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

除此之外，同一颗组件树之内的组件之间还可以通过内建的事件API来进行通信。Vue.js提供了完善的定义、复用和嵌套组件的API，让开发者可以像搭积木一样用组件拼出整个应用的界面。

组件大大提高了代码的效率和维护性以及复用率。

使用组件

注册

1.创建一个组件构造器：

var MyComponent = Vue.extend({//选项})

2.将构造器用做组件，用Vue.component(tag,constructor)注册：

Vue.component('my-component',MyComponent)

3.在父实例的模块中以自定义元素<my-component>的形式使用：

<div id = "example"><my-component></my-component></div>

例子：

<div id="example"><my-component></my-component></div>// 定义var MyComponent = Vue.extend({template: '<div>A custom component!</div>'})// 注册Vue.component('my-component', MyComponent)// 创建根实例new Vue({el: '#example'})

渲染为：

<div id = "example"><div>A custom component!</div></div>

组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。可以用实例选项 replace 决定是否替换。