深入理解Vue.js组件!
来源:互联网 发布:ubuntu 14.10安装jdk 编辑:程序博客网 时间:2024/05/01 22:01
组件
Vue.js引入的组件,让分解单一HTML到独立组件成为可能。组件可以自定义元素
形式使用,或者使用原生元素但是以is特性做扩展。
注册和引用
使用组件之前,首先需要注册。可以注册为全局的或者是局部的。全局注册可以使用:
Vue.component(tag, options)
注册一个组件。tag为自定义元素
的名字,options同为创建组件的选项。注册完成后,即可以<tag>
形式引用此组件。如下是一个完整可运行的案例:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <tag></tag></div><script> Vue.component('tag', { template: `<div>one component rule all other<div>` }) new Vue({ el: "#app" });</script>你也可以局部注册,这样注册的组件,仅仅限于执行注册的Vue实例内:<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <tag></tag></div><script> var tag = { template: `<div>one component rule all other<div>` } new Vue({ el: "#app", components: {tag} });</script>
我们注意到,<tag>
是HTML本身并不具备的标签,现在由Vue的组件技术引入,因此被称为是自定义标签
。这些自定义标签的背后实现常常是标签、脚本、css的集合体。它的内部可以非常复杂,但是对外则以大家习惯的简单的标签呈现。通过本节这个小小案例,组件技术带来的抽象价值已经展现出来一角了。
动态挂接
多个组件可以使用同一个挂载点,然后动态地在它们之间切换。元素<component>
可以用于此场景,修改属性is即可达成动态切换的效果:
<component v-bind:is="current"></component>
假设我们有三个组件home、posts、archives,我们可以设置一个定时器,每隔2秒修改一次current,把三个组件的逐个切入到当前挂接点:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <component v-bind:is="current"> </component></div><script>var app = new Vue({ el: '#app', data: { current: 'archive', i :0, b : ['home','posts','archive'] }, components: { home: { template:'<h1>home</h1>'}, posts: { template:'<h1>posts</h1>' }, archive: {template:'<h1>archive</h1>'} }, methods:{ a(){ this.i = this.i % 3 this.current = this.b[this.i] this.i++ setTimeout(this.a,2000) } }, mounted(){ setTimeout(this.a,2000) }})</script>
引用组件
一个父组件内常常有多个子组件,有时候为了个别处理,需要在父组件代码内引用子组件实例。Vue.js可以通过指令v-ref设置组件的标识符,并在代码内通过$refs+标识符
来引用特定组件。接下来举例说明。
假设一个案例有三个按钮。其中前两个按钮被点击时,每次对自己的计数器累加1;另外一个按钮可以取得前两个按钮的计数器值,并加总后设置{{total}}的值。此时在第三个按钮的事件代码中,就需要引用前两个按钮的实例。代码如下:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> {{ total }} <count ref="b1"></count> <count ref="b2"></count> <button v-on:click="value">value</button></div><script> Vue.component('count', { template: '<button v-on:click="inc">{{ count }}</button>', data: function () { return {count: 0} }, methods: { inc: function () { this.count+= 1 } },})new Vue({ el: '#app', data: {total:0}, methods: { value: function () { this.total = this.$refs.b1.count+this.$refs.b2.count } }})</script>
标签button使用ref设置两个按钮分为为b1、b2,随后在父组件代码内通过$refs引用它们。
组件协作
按照组件分解的愿景,一个大型的HTML会按照语义划分为多个组件,那么组件之间必然存在协作的问题。Vue.js提供的协作方式有属性传递、事件传递和内容分发。
使用属性
此方法用于父组件传递数据给子组件。每个组件的作用域都是和其他组件隔离的,因此,子组件不应该直接访问父组件的数据,而是通过属性传递数据过来。如下案例传递一个字符串到子组件:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <child message="hello"></child></div><script> Vue.component('child', { props: ['message'], template: '<span>{{ message }}</span>' }) new Vue({el:'#app'})</script>
本案例会显示
hello
在页面上。这里,父组件为挂接在#app上的Vue实例,子组件为child。child使用props声明一个名为message的属性,此属性把父组件内的字符串hello传递数据到组件内。
如果不是传递一个静态的字符串,而是传递JavaScript表达式,那么可以使用指令v-bind:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <child v-bind:message="hello+',world'"></child></div><script> Vue.component('child', { props: ['message'], template: '<span>{{ message }}</span>' }) new Vue({ el:'#app', data:{hello:'hi'} })</script>
运行结果为:
hi,world
本案例把父组件内的hello成员传递给子组件。出现在属性内的hello不再指示字面上的字符串,而是指向一个表达式,因此传递进来的是表达式的求值结果。
属性验证
当通过属性传递表达式时,有些时候类型是特定的,Vue提供了属性的验证,包括类型验证,范围验证等。比如传递年龄进来的话,要求应该是整数。案例如下:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <child v-bind:age="age"></child></div><script> Vue.component('child', { props: {'age':Number}, template: '<span>you are {{ age }}</span>' }) new Vue({ el:'#app', data:{age:'30'} })</script>
如果你使用的是开发版本的vue.js,那么会在控制台得到一个警告,Vue 将拒绝在子组件上设置此值:
[Vue warn]: Invalid prop: type check failed for prop "age". Expected Number, got String.(found in component <child>)
当把age的那一行修改为数字,即:
data:{age:30}
警告就会消失。属性名称后可以加入类型,类型检查除了使用Number,还可以有更多,完整类型列表如下:
StringNumberBooleanFunctionObjectArray
你还可以在属性名后跟一个对象,在此对象内指定范围检查,提供默认值,或者要求它是必选属性:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <child v-bind:age="age"></child></div><script> Vue.component('child', { props: {'age':{ type:Number, validator: function (value) { return value > 0 && value<150 }, required:true, default:50 } }, template: '<span>you are {{ age }}</span>' }) new Vue({ el:'#app', data:{age:'149'} })</script>
官方手册提供了一个相对全面的验证样例:
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 } } }})
使用事件
每个Vue实例都有事件接口,组件是一个具体的Vue实例,因此也有事件接口,用来发射和接收事件,具体事件如下:
发射事件:$on(event)
接收事件:$emit(event)
我们假设一个案例来说明事件通讯。此案例中,有一个父组件绑定在#app上,还有两个按钮组件,点击任何一个按钮让自己的计数器加1,并且让父组件内的一个计数器加1。图例:
使用一个案例,来演示事件的使用:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> {{ total }} <count ref="b1" ></count> <count ref="b2" ></count></div><script> Vue.component('count', { template: '<button v-on:click="inc">{{ count }}</button>', data: function () { return {count: 0} }, methods: { inc: function () { this.count+= 1 this.$emit('inc') } },})new Vue({ el: '#app', data: {total: 0}, mounted(){ this.$refs.b1.$on('inc',this.inc) this.$refs.b2.$on('inc',this.inc) }, methods: { inc: function () { this.total += 1 } }})</script>
在父组件的绑定完成钩子函数(函数mounted)内,通过$on
方法监听inc
事件到this.inc
。在子组件count
内,完成对自己的计数器count
加1后随即使用$emit
发射事件给父组件。另外,我们使用了v-ref
指令为每一个子组件一个引用标识符,从而在代码内可以使用形如:
this.$refs.childRefName
来引用子组件实例。除了在js代码内通过$on方法设置监听代码外,也可以使用指令v-on在HTML内达成类似效果:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> {{ total }} <count v-on:inc='inc'></count> <count v-on:inc='inc'></count></div><script> Vue.component('count', { template: '<button v-on:click="inc">{{ count }}</button>', data: function () { return {count: 0} }, methods: { inc: function () { this.count+= 1 this.$emit('inc') } },})new Vue({ el: '#app', data: {total: 0}, methods: { inc: function () { this.total += 1 } }})</script>
这种方法的好处是:
省下了ref属性的声明,因为不必在代码中引用组件。
在HTML就可以一目了然地看到监听的是哪个子组件。
内容分发
可以利用组件,把较大的HTML分解为一个个自洽的组件。比如常见的论坛首页的HTML的架构可能是这样的:
<div class='wrapper'> <div class='navigator'>navigator...</div> <div class='content'> <div class='topics'>topics...</div> <div class='userinfo'>userinfo...</div> </div></div>
所有的内容全部呈现在一个HTML内。可以想见此文件巨大,并且还会随着需求的变化而继续增长。如果使用组件来做分解,那么首页可以变为:
<wrapper> <navigator></navigator> <content1> <topics><topics> <userinfo></userinfo> </content1><wrapper>
注意:使用标签content1,而不是content,是因为后者是html内置的标签,我们的自定义标签不应该和内置标签冲突。
本来嵌入在div内的内容,现在可以分解到一个个的组件内。比如topics,形如:
var topics = { template: `<div class='topics'>topics...</div>`}
如下是一个可运行的案例:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <wrapper> <navi></navi> <content1> <topics></topics> <userinfo></userinfo> </content1> <wrapper></div><script> Vue.component('topics',{ template: `<div class="topics">topics ...<div>` }) Vue.component('userinfo',{ template: `<div class="userinfo">userinfo ...<div>` }) Vue.component('content1',{ template: `<div class="content"><slot></slot><div>`, }) var navi = Vue.component('navi',{ template: `<div class="navigator">navigator ...<div>` }) var wrapper = Vue.component('wrapper',{ template: `<div class="wrapper"><slot></slot><div>`, }) new Vue({ el: "#app", components:{ wrapper } });</script>
请留意到wrapper组件模板内使用了<slot>
标签,content1组件内也使用了<slot>
。标签<slot>
的语义是——请把使用此组件自定义标签内的全部内容抓取过来,放置到<slot>
所在的位置上。以content1为例,它在自定义标签内的全部内容为:
<topics></topics><userinfo></userinfo>
这里内容会直接被抓取过来,放置到<slot>
处,从而混合得到content最终的模板:
<div class="content"> <topics></topics> <userinfo></userinfo><div>
这个过程奇妙而难解,但是非常有用。这意味着,可以通过<slot>
,把父组件内的HTML片段传递到组件内,从而完成一种另类的父子数据传递。
随即发生的,是<topics>
和<userinfo>
代表的组件的内容也混入到content1内,变成
<div class="content"> <div class="topics">topics ...<div> <div class="userinfo">userinfo ...<div><div>
就这样,我们通过<slot>
技术,一步步从组件还原出最初的HTML。这个技术被称为内容分发
。slot,也就是插槽,是内容分发的重要标签。
详解插槽
如果子组件模板包含<slot>
,父组件的内容就会被插入到<slot>
位置上并替换掉<slot>
标签本身,否则父组件内的内容将会被丢弃。
如果<slot>
标签中本身是有内容的,那么这些内容如何和插入的内容合并呢?这些本有的内容被视为备用内容。也就是说,如果父组件内元素为空,备用内容会保留,否则就会被丢弃。
假定子组件foo有下面模板:
<div> <slot> 备用内容 </slot></div>
父组件内容如下:
<div> <foo> <p>parent content</p> </foo></div>
渲染结果:
<div> <div> <p>parent content</p> </div></div>
如果父组件为:
<div> <foo> </foo></div>
那么渲染结果为:
<div> <div> 备用内容 </div></div>
如下是一个整合后的案例:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <foo><p>parent content</p></foo></div><script> Vue.component('foo', { template: ` <div> <slot> 备用内容 </slot> </div>`,})new Vue({ el: '#app'})</script>
你可以试试删除<p>parent content</p>
,对比父组件有无内容带来的差别。
多个插槽
嵌入到子组件标签的内容,可以通过给予属性slot不同的值,来区别不同的插槽。在子组件内使用<slot name=''>
方式来引用它们。有了命名插槽,内容分发可以变得更加灵活。在多个插槽的场景下,如果找不到匹配的插槽,可以使用一个备用的插槽来承载内容。如果内容既找不到命名插槽,也没有备用插槽的话,就会被丢弃。
假设一个子组件<app-layout>
模板为:
<div class="container"> <header> <slot name="header"></slot> </header> <body> <slot></slot> </body></div>
父组件模板为:
<app-layout> <h1 slot="header">title</h1> <p>content</p></app-layout>
那么渲染结果:
<div class="container"> <header> <h1>title</h1> </header> <body> <p>content</p> </body></div>
综合案例:插槽
现在我们看一个高级的案例,我来做一个即时贴(sticky)组件,用来显示一个有标题和主体的即时贴。组件会定义好即时贴的结构和外观,而具体的标题和内容值则使用内容分发技术来传入组件:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div class="" id="app"> <sticky> <div slot="title"> <h3>Title</h3></div> <div slot="body"><p> Body foo bar baz ddd </p></div> </sticky></div><script> Vue.component('sticky', { template: ` <div> <div class="wrapper"> <div> <div class="title"> <slot name="title"></slot> </div> <div class="body"> <slot name="body"></slot> </div> </div> </div> </div>`});new Vue({ el: "#app"});</script><style>.wrapper { display: flex; width: 180px; height: 150px; background: yellow; border-radius: 10px;}.title { border-bottom:1px solid red}.body { border-bottom:1px solid blue}</style>
本案例内,使用上下文通过属性slot创建了两个插槽,分别为title和body,在组件的模板内通过<slot>
标签引用对应名称的插槽(title和body),并把它注入到插槽标签占据的位置上。
使用事件总线
如果两个组件之间没有父子关系,但是也需要通讯,可以使用事件总线。具体做法就是创建一个空的Vue实例作为中介,事件发起方调用此实例的$emit方法来发射事件,而事件监听方使用此实例的$on方法来挂接事件。
举例说明。此案例代码中有两个按钮,点击一个按钮会让另一个按钮的组件的count加1。代码如下:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <foo></foo> <bar></bar></div><script> var bus = new Vue({}) Vue.component('foo', { template: '<button v-on:click="inc">{{ count }}</button>', data: function () { return {count: 0} }, mounted(){ bus.$on('foo-inc',this.doinc) }, methods: { inc: function () { bus.$emit('bar-inc',this) }, doinc: function () { this.count++ } },})Vue.component('bar', { template: '<button v-on:click="inc">{{ count }}</button>', data: function () { return {count: 0} }, mounted(){ bus.$on('bar-inc',this.doinc) }, methods: { inc: function () { bus.$emit('foo-inc',this) }, doinc: function () { this.count++ } }})new Vue({ el: '#app'})</script>
这里列出的案例,是同属一个父组件的两个兄弟组件的通讯方法。实际上作为总线方式的Vue实例,可以用于任何组件之间的通讯。
综合案例
为了演示说明vue的组件通讯,我们从一个假设的todo应用开始(再次:)。UI当然还是类似这样的:
但是这次的新意在于,我们会把整个app分为三个组件,层次关系如下:
app--newTodo--todoList
app作为父应用组件,newTodo作为一个子组件负责用户输入,并且获取新的todo;而todoList作为另外一个子组件,它需要负责显示全部todo项目到列表中。
这样的分工在稍微大的app中非常常见,由此达成分而治之的目的。但是组件之间势必需要通讯,比如newTodo组件必须把新的todo字符串通知到todoList组件,以便后者更新todo列表并由此更新用户界面。
基于组件结构的通讯
在Vue.js 1.0版本内,从子组件到父组件的通讯,Vue.js提供了$dispatch方法,而从父组件到子组件则是通过 $broadcast方法。我们在如下的代码中使用了此技术:
<html> <head> <script src="https://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script> </head><body> <div id="todo-app"> <h1>todo app</h1> <new-todo></new-todo> <todo-list></todo-list> <div> <script> var newTodo = { template:'<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>', data(){ return{ newtodo:'' } }, methods:{ add:function(){ this.$dispatch('newtodo',this.newtodo) this.newtodo = '' } } } var todoList = { template:'<ul> \ <li v-for="(index,item) in items">{{item}} \ <button @click="rm(index)">X</button></li> \ </ul>', data(){ return{ items:['item 1','item 2','item 3'], } }, methods:{ rm:function(i){ this.items.splice(i,1) } }, events: { 'newtodo': function (newtodo) { this.items.push(newtodo) } }, } var app= new Vue({ el:'#todo-app', components:{ newTodo:newTodo, todoList:todoList }, events: { 'newtodo': function (newtodo) { this.$broadcast('newtodo',newtodo) } } }) </script></body></html>
整个通讯过程是这样的:
组件newTodo在用户点击按钮后,会把新的todo字符串通过$dispatch发出。
而父组件app在event内截获此事件,随即通过$broadcast方法发送到子组件。
子组件todoList在event内截获此事件取出payload,加入它到数据items内。
这就是组件通讯的方法。Vue.js并没有为兄弟组件提供直接的通讯方法,如果兄弟组件之间需要通讯,只能先发给父组件,父组件向子组件广播,侦听此事件的子组件随后获取此事件。
通过$broadcast+$dispatch完成组件通讯是可行的,但是问题不少:
依赖于树形组件结构,你得知道组件的结构是怎么样的。
组件结构复杂的话,必然降低通讯效率。
兄弟组件直接不能直接通讯,必须通过父组件间接完成。
在Vue2.0版本内,此方法已经被废弃。
集中化的eventBus
实际上,我们只是为了让两个组件交换数据,这个过程并不应该和组件的结构(父子关系的组件,兄弟关系的组件)捆绑在一起。因此,一个变通的方式是引入一个新的组件,用它作为组件之间的通讯中介,此技术被称为Event Bus。如下代码正式利用了此技术:
<html> <head> <script src="https://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script> </head><body> <div id="todo-app"> <h1>todo app</h1> <new-todo></new-todo> <todo-list></todo-list> <div> <script> var eventHub =new Vue( { data(){ return{ todos:['A','B','C'] } }, created: function () { this.$on('add', this.addTodo) this.$on('delete', this.deleteTodo) }, beforeDestroy: function () { this.$off('add', this.addTodo) this.$off('delete', this.deleteTodo) }, methods: { addTodo: function (newTodo) { this.todos.push(newTodo) }, deleteTodo: function (i) { this.todos.splice(i,1) } } }) var newTodo = { template:'<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>', data(){ return{ newtodo:'' } }, methods:{ add:function(){ eventHub.$emit('add', this.newtodo) this.newtodo = '' } } } var todoList = { template:'<ul> \ <li v-for="(index,item) in items">{{item}} \ <button @click="rm(index)">X</button></li> \ </ul>', data(){ return{ items:eventHub.todos } }, methods:{ rm:function(i){ eventHub.$emit('delete', i) } } } var app= new Vue({ el:'#todo-app', components:{ newTodo:newTodo, todoList:todoList } }) </script></body></html>
由此代码我们可以看到:
app组件不再承担通讯中介功能,而只是简单的作为两个子组件的容器。
eventBus组件承载了全部的数据(todos),以及对数据的修改,它监听事件add和delete,在监听函数内操作数据。
子组件todoList的data成员的数据来源改为从eventBus获取,删除todo的方法内不再操作数据,而是转发给eventBus来完成删除。
子组件newTodo的按钮不再添加数据,而是转发事件给eventBus,由后者完成添加。
这样做,就把本来捆绑到组件结构上的通讯还原为单纯的通讯,并且集中数据和操作到一个对象(eventBus),也就有利于组件的数据共享。当我们谈到eventBus的时候,我们离vuex——一个更加专业的状态管理库就比较近了。后文会谈及vuex。
组件编码风格
Vue组件是很好的复用代码的方法。接下来,我们使用一个微小的案例来讲解组件。我们可以看到HTML代码:
<div id="app"> <span>{{count}}</span> <button @click="inc">+</button></div>
标签<span>
和<button>
其实一起合作,完成一个完整的功能,它们是内聚的;因此可以利用组件的概念,用一个语义化的自定义标签
,把两个标签包装到一个组件内。以此观念,做完后应该得到这样的代码:
<div id="app"> <counter></counter></div>
为此,我们需要创建一个组件,它可以容纳两个标签以及和它们有关的方法和数据。我们会采用多种方案来完成此组件,从而了解组件的多种编码风格。首先,我们从使用集中template
的组件编码风格开始。
集中模板式
以下代码是可以直接保存为html文件,并使用浏览器来打开运行的:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <counter></counter></div><script>var counter = { 'template':'<div><span>{{count}}</span><button v-on:click="inc">+</button></div>', data () { return {count: 0} }, methods: { inc () {this.count++} } }var app = new Vue({ components:{ counter : counter }})app.$mount('#app')</script>
我们对代码稍作解释:
Vue的实例属性template。它的值用来承载模板代码,本来放置在主HTML内的两个标签现在搬移到此处。需要注意的是,两个标签外套上了一个div标签,因为Vue2.0版本要求作为模板的html必须是单根的。
Vue的实例属性components。它可以被用来注册一个局部组件。正是在此处,组件counter被注册,从而在html标签内可以直接使用标签
<counter>
来引用组件counter。
引入组件技术后,强相关性的html标签和对应的数据、代码内聚到了一起,这是符合软件工程分治原则的行为。
另外,使用template在代码内混合html字符串还是比较烦人的:
你得小心的在外层使用单引号,在内部使用双引号。
如果html比较长,产生了跨行,这样的字符串书写比较麻烦。
我们继续查看其它方案。
分离模板式
为了增加可读性,模板字符串内的HTML可以使用多种方式从代码中分离出来。比如采用x-template方法:
<script src="https://unpkg.com/vue/dist/vue.js"></script><script type="x-template" id="t"> <div> <span>{{count}}</span> <button v-on:click="inc">+</button> </div></script><div id="app"> <counter></counter></div><script>var counter = { 'template':'#t', data () { return {count: 0} }, methods: { inc () {this.count++} } }var app = new Vue({ components:{ counter : counter }})app.$mount('#app')</script>
模板x-template使用标签script,因为这个标签的类型是浏览器无法识别的,故而浏览器只是简单地放在DOM节点上。这样你可以使用getElementById方法获得此节点,把它作为HTML片段使用。
或者使用在HTML5引入的新标签template,看起来稍微干净些:
<script src="https://unpkg.com/vue/dist/vue.js"></script><template id="t"> <div> <span>{{count}}</span> <button v-on:click="inc">+</button> </div></template><div id="app"> <counter></counter></div><script>var counter = { 'template':'#t', data () { return {count: 0} }, methods: { inc () {this.count++} } }var app = new Vue({ components:{ counter : counter }})app.$mount('#app')</script>
或者如果组件内容并不需要做分发
的话,可以通过inline-template标记它的内容,把它当作模板:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <counter inline-template> <div> <span>{{count}}</span> <button v-on:click="inc">+</button> </div> </counter></div><script>var counter = { data () { return {count: 0} }, methods: { inc () {this.count++} } }var app = new Vue({ components:{ counter : counter }})app.$mount('#app')</script>
函数式
Render函数可以充分利用JavaScript语言在创建HTML模板方面的灵活性。实际上,组件的Template最终都会转换为Render函数。对于同一需求,使用Render函数的代码如下:
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <counter></counter></div><script> var a = { data () { return {count: 1} }, methods: { inc () {this.count++} }, render:function(h){ // var self = this; var buttonAttrs = { on: { click: this.inc }, domProps: { innerHTML: '+' }, }; var spanAttrs = { on: { click: this.inc }, domProps: { innerHTML: this.count.toString() }, }; var span = h('span', spanAttrs, []); var button = h('button', buttonAttrs, []); return h('div' ,{}, [ span, button ]) } } new Vue({ el:'#app', components:{ counter : a }} )</script>
函数render的参数h,其实是一个名为createElement 的函数,可以用来创建元素。此函数的具体说明,请参考官方手册即可。为了方便,此处完整使用createElement的实例代码抄写自vue.js手册。如下 :
createElement( // {String | Object | Function} // An HTML tag name, component options, or function // returning one of these. Required. 'div', // {Object} // A data object corresponding to the attributes // you would use in a template. Optional. { // (see details in the next section below) }, // {String | Array} // Children VNodes. Optional. [ createElement('h1', 'hello world'), createElement(MyComponent, { props: { someProp: 'foo' } }), 'bar' ])
如果要标签名本身都是可以动态的,怎么办?比如我希望提供一个标签,可以根据属性值动态选择head的层级,像是把
<h1>header1</h1><h2>header2</h2>
可以替代为:
<hdr :level="1">header1</hdr> <hdr :level="2">header2</hdr>
使用render
函数解决此类问题是非常便利的。具体做法就是先注册一个组件:
Vue.component('hdr', { render: function (createElement) { return createElement( 'h' + this.level, // tag name this.$slots.default // array of children ) }, props: { level: { type: Number, required: true } }})
随后在html内使用此组件:
//javascriptnew Vue({ el: '#example'})// html<div id="example"> <hdr :level="1">abc</hdr> <hdr :level="2">abc</hdr></div>
可以执行的代码在此:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script><div id="example"> <hdr :level="1">abc</hdr> <hdr :level="2">abc</hdr></div><script type="text/javascript"> Vue.component('hdr', { render: function (createElement) { console.log(this.level) return createElement( 'h' + this.level, this.$slots.default ) }, props: { level: { type: Number, required: true } }})new Vue({ el: '#example'})</script>
函数render会传入一个createElement函数作为参数,你可以使用此函数来创建标签。在render函数内,可以通过this.$slots访问slot,从而把slot内的元素插入到当前被创建的标签内。
- 深入理解Vue.js组件!
- 【Vue.js】-Vue.js组件
- 深入vue组件
- Vue.js 组件中的v-on绑定自定义事件理解
- Vue组件理解
- 深入理解vue.js双向绑定的实现原理
- Vue.js组件
- Vue.js笔记-组件
- Vue.js说说组件
- Vue.js 组件
- vue.js组件开发
- vue.js基础-组件
- Vue.js 组件
- Vue.js说说组件
- Vue.js常用组件
- vue.js之组件
- vue.js 组件问题
- 常用js框架之vue.js(深入三:组件1)
- C#读取文件demo
- 动态规划
- Dijkstra算法模板
- 代码优化
- 最大子序列和的分治算法
- 深入理解Vue.js组件!
- 回炉啦
- 【洛谷P1231】教辅的组成
- 常量指针和指向常量的指针
- 正则表达式
- 天舟一号即将发射,新技术筑梦天宫
- Qt for Mac:配置/搭建开发环境
- windows内存管理的机制以及优缺点
- 第九周 算法Integer Break