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.创建一个组件构造器：

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

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

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

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

1. <div id = "example">
2.     <my-component>my-component>
3. div>

       例子：

1. <div id="example">
2.   <my-component>my-component>
3. div>
4. // 定义
5. var MyComponent = Vue.extend({
6.   template: '
   A custom component!
   '
7. })
8. // 注册
9. Vue.component('my-component', MyComponent)
10. // 创建根实例
11. new Vue({
12.   el: '#example'
13. })

       渲染为：

1. <div id = "example">
2.    
   A custom component!div>
3. div>

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

局部注册

        用实例选项components注册，不需要全局注册每个组件，可以让组件只能用在其他组件内：

1. var Child = Vue.extend({ /* ... */ })
2. var Parent = Vue.extend({
3.   template: '...',
4.   components: {
5.     // 只能用在父组件模板内
6.     'my-component': Child
7.   }
8. })

       这种封装也适用于其它资源，如指令、过滤器和过渡。

注册语法糖

1. // 在一个步骤中扩展与注册
2. Vue.component('my-component', {
3.   template: '
   A custom component!
   '
4. })
5.  
6. // 局部注册也可以这么做
7. var Parent = Vue.extend({
8.   components: {
9.     'my-component': {
10.       template: '
    A custom component!
    '
11.     }
12.   }
13. })

组件选项问题

        传入Vue构造器的多数选项也可以用在Vue.extend()中，除了data和el，如果简单的把一个对象作为data选项传给Vue.extend()，则所有的实例将共享同一个data对象，因此 我们应当使用一个函数作为data选项，让这个函数返回一个新对象：

1. var MyComponent = Vue.extend({
2.   data: function () {
3.     return { a: 1 }
4.   }
5. })

模板解析

       Vue的模板是DOM模板，使用浏览器原生的解析器，所以它必须是有效的HTML片段，一些HTML元素对什么元素可以放在它里面有限制，常见的限制有：

• a 不能包含其它的交互元素（如按钮，链接）
  
• ul 和 ol 只能直接包含 li
  
• select 只能包含 option 和 optgroup
  
• table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
  
• tr 只能直接包含 th 和 td
  

       在实际中，这些限制会导致意外的结果。尽管在简单的情况下它可能可以工作，但是你不能依赖自定义组件在浏览器验证之前的展开结果。例如 ... 不是有效的模板，即使 my-select 组件最终展开为 ...。

       另一个结果是，自定义标签（包括自定义元素和特殊标签，如 、