vue.js2.0 自定义组件初体验
Posted GKL2013
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js2.0 自定义组件初体验相关的知识,希望对你有一定的参考价值。
VUE.JS 2.0 自定义组件初体验
理解
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。
使用组件
创建单文件组件
<template> </template> <script> export default { }; </script> <style lang="stylus" rel="stylesheet/stylus"> </style>
组件注册
注册分为两种:局部注册和全局注册。注册一个全局组件,可以使用 Vue.component(tagName, options)
。 把构造函数注册到my-component这个 id Vue.component(\'my-component\', MyComponent),为了写法更简单,也可以直接传入 option 对象来代替构造函数,Vue.component() 会为你隐式调用 Vue.extend() 。
// 注册全局组件,指定之前设定的元素名,然后传入对象 Vue.component(\'my-component\', { template: \'<div>hello world!</div>\' })
之后就能在父级实例的模板中使用注册过的组件了 (务必在初始化根实例之前注册组件) :
<my-component></my-component>
我们没有必要,也不应该全局注册所有组件。你可以限制一个组件仅对另一个组件及其后代可用,只要在另一个组件的 components 选项中传入这个组件即可。
import header from \'./components/header/header.vue\'; export default { data () { }, components: { \'v-header\': header } };
构成组件
data对象
data 必须是函数。因为如果不是函数的,声明多个组件的时候,他们共享的就是同一个data,这样就会乱掉。如果通过函数返回,那么每个组件维持自己的data作用域。该data属性只在其component中可见。
通过 prop 传递数据
组件实例的作用域是孤立的,组件和组件之间,即使有同名属性,值也不共享。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
Vue.component(\'child\', { // 声明 props props: [\'message\'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: \'<span>{{ message }}</span>\' })
需要注意的是HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名,这点在angularjs的指令中也一样。
Vue.component(\'child\', { // camelCase in javascript props: [\'myMessage\'], template: \'<span>{{ myMessage }}</span>\' })
<!-- kebab-case in HTML --> <child my-message="hello!"></child>
在vue2.0中prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。这点官方文档给出了明确的说明和解决办法。
当我开发一个通用组件时,需要对传入的数据进行严格的验证,我们可以定义传入数据的类型,同时也可以设置其默认值。如果传入的数据不符合规格,Vue 会发出警告。
Vue.component(\'example\', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字,有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: \'hello\' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })
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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
以上是关于vue.js2.0 自定义组件初体验的主要内容,如果未能解决你的问题,请参考以下文章
Android开发学习之路--Broadcast Receiver初体验
我正在使用 Vue.js 2.0,我正在尝试从“子组件”发出事件
Vue.js2.0中子组件修改父组件传递过来的props,并不影响父组件的原始数据