vue组件讲解(is属性的用法)
什么是组件?
在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的。
组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可以重复使用的代码。在较高层次上,组件就是自定义元素,Vue.js的编辑器为它添加特殊功能。在有些情况下,组件也可以是原生元素的形式,以is
特性进行扩展。
怎么使用组件?
说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢?
首先,我们要进行注册,才能进行使用
注册
之前我们也说过,可以通过new
来创建一个VUE实例
new Vue ({
'el' : '#element',
//选项
})
- 1
- 2
- 3
- 4
这样,一个vue实例我们就创建成功了,这时候就要注册一个组件,我们可以通过Vue.component(tagName,options)
。由于作用域的不同,组件也是分为全局组件和局部组件的,我们先来说全局组件。
Vue.component('my-component',{
//选项
})
- 1
- 2
- 3
一个全局组件就这样组册成功了,此后便可以在父实例的模块中以自定义元素<my-component></my-component>
的形式进行使用。一定切记,要确保在初始化根实例之前注册了组件:
<div id='app'>
<my-component></my-component>
</div>
- 1
- 2
- 3
//注册组件
Vue.component('my-component',{
'template' : '<div>一个全局组件</div>'
})
//创建根实例
new Vue({
'el' : '#app',
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
以上渲染出来就是:
<div id='app'>
<div>一个全局组件</div>
</div>
- 1
- 2
- 3
局部注册
在开发中,我们不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域可用,代码如下:
var Child = {
'template' : '<div>一个组件</div>'
}
new Vue({
'el' : '#app',
//...
'component' : {
'my-component' : Child
//此时该模板只能在父实例中使用
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
这种封装方式也可适用于其他可注册的Vue功能。如指令
DOM模板解析说明
当使用DOM作为模板时(例如,将el
选项挂载到一个已知的元素上),你会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>
限制了能被它保过的元素,而一些像option
这样的元素只能出现在某些其他元素的内部。
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table>
<my-row>...</my-row>
</table>
- 1
- 2
- 3
自定义组件<my-row>
被认为是无效的内容,因此在渲染的时候会出现导致错误。变通的方案是使用特殊的is
属性:
<table>
<tr is='my-row'>...</tr>
</table>
- 1
- 2
- 3
应当注意,如果我们使用下面来源之一的字符串模板,这些限制将不适用:
<script type='text/x-template'>
- JavaScript内联模板字符串
.Vue
组件
因此,有必要的话请使用字符串模板
data
必须是函数
通过Vue构造器传入的各种选项大多数都可以在组件里使用。data
是个例外,它必须是函数。实际上,如果我们这样做:
Vue.component('my-component',{
'template' : '<span>{{message}}</span>',
'data' : {
'message' : 'hello'
}
})
- 1
- 2
- 3
- 4
- 5
- 6
那么Vue会停止,并在控制台发出警告,告诉你在组件中data
必须是函数。理解这种规则存在的意义很有帮助,让我们假设用如下方式来避开Vue的警告:
<div id='app'>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
- 1
- 2
- 3
- 4
- 5
var data = {counter : 0}
Vue.component('simple-counter',{
'template' : '<button v-on:click='counter += 1'>{{counter}}</button>'
//技术上data是一个函数,所以Vue不会警告
//但是我们返回给每个组件的实例调用了同一个data对象
'data' : function (){
return data
}
})
new Vue({
'el' : '#app'
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
由于这三个组件共享一个data
,因此增加一个counter会影响所有组件!很明显,这样做是不对的。我们可以通过为每个组件返回全新的data对象来解决这个问题,如下:
data : function (){
return {
counter : 0
}
}
- 1
- 2
- 3
- 4
- 5
现在每个counter都有它自己内部的状态了。
构成组件
组件意味着协同工作,通常父子组件会是这样的关系:组件A在它的模板中使用了组件B。它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅度提高了组件的可维护性和可重用性。
在Vue中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。如图: