vue.js2.0 自定义组件体验

itjc8

vue.js2.0 自定义组件体验

理解组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
使用组件创建单文件组件

1. <template>
   
2. </template>
   
3. 
   
4. <script>
   
5.   export default {
   
6.   };
   
7. </script>
   
8. 
   
9. <style lang="stylus" rel="stylesheet/stylus">
   
10. </style>

复制代码

组件注册
注册分为两种：局部注册和全局注册。注册一个全局组件，可以使用 Vue.component(tagName, options)。 把构造函数注册到my-component这个 id Vue.component('my-component', MyComponent)，为了写法更简单，也可以直接传入 option 对象来代替构造函数，Vue.component() 会为你隐式调用 Vue.extend() 。

1. // 注册全局组件,指定之前设定的元素名,然后传入对象
   
2. Vue.component('my-component', {
   
3.   template: '<div>hello world!</div>'
   
4. })

复制代码

之后就能在父级实例的模板中使用注册过的组件了 (务必在初始化根实例之前注册组件) ：

1. <my-component></my-component>

复制代码

我们没有必要，也不应该全局注册所有组件。你可以限制一个组件仅对另一个组件及其后代可用，只要在另一个组件的 components 选项中传入这个组件即可。

1. import header from './components/header/header.vue';
   
2. 
   
3.   export default {
   
4.     data () {
   
5.     },
   
6.     components: {
   
7.       'v-header': header
   
8.     }
   
9.   };

复制代码

构成组件data对象

data 必须是函数。因为如果不是函数的，声明多个组件的时候，他们共享的就是同一个data，这样就会乱掉。如果通过函数返回，那么每个组件维持自己的data作用域。该data属性只在其component中可见。

通过 prop 传递数据

组件实例的作用域是孤立的,组件和组件之间，即使有同名属性，值也不共享。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

1. Vue.component('child', {
   
2.   // 声明 props
   
3.   props: ['message'],
   
4.   // 就像 data 一样，prop 可以用在模板内
   
5.   // 同样也可以在 vm 实例中像 “this.message” 这样使用
   
6.   template: '<span>{{ message }}</span>'
   
7. })

复制代码

需要注意的是HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名，这点在angularjs的指令中也一样。

1. Vue.component('child', {
   
2.   // camelCase in JavaScript
   
3.   props: ['myMessage'],
   
4.   template: '<span>{{ myMessage }}</span>'
   
5. })

复制代码

1. <!-- kebab-case in HTML -->
   
2. <child my-message="hello!"></child>

复制代码

在vue2.0中prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。这点官方文档给出了明确的说明和解决办法。

当我开发一个通用组件时，需要对传入的数据进行严格的验证，我们可以定义传入数据的类型，同时也可以设置其默认值。如果传入的数据不符合规格，Vue 会发出警告。

1. Vue.component('example', {
   
2.   props: {
   
3.     // 基础类型检测 （`null` 意思是任何类型都可以）
   
4.     propA: Number,
   
5.     // 多种类型
   
6.     propB: [String, Number],
   
7.     // 必传且是字符串
   
8.     propC: {
   
9.       type: String,
   
10.       required: true
    
11.     },
    
12.     // 数字，有默认值
    
13.     propD: {
    
14.       type: Number,
    
15.       default: 100
    
16.     },
    
17.     // 数组／对象的默认值应当由一个工厂函数返回
    
18.     propE: {
    
19.       type: Object,
    
20.       default: function () {
    
21.         return { message: 'hello' }
    
22.       }
    
23.     },
    
24.     // 自定义验证函数
    
25.     propF: {
    
26.       validator: function (value) {
    
27.         return value > 10
    
28.       }
    
29.     }
    
30.   }
    
31. })

复制代码

type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array
  

type 也可以是一个自定义构造器函数，使用 instanceof 检测。

生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。首先看看下面官网的一张生命周期的图：

Vue提供的可以注册的钩子都在上图片的红色框标注。 他们分别是：

• beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
• created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
  

codercj

牛啊牛啊牛啊牛啊牛啊牛啊牛啊牛啊