组件是vue 最核心的功能
组件与复用
vue的组件提高了重用性,让代码可以复用。
- 组件的用法
组件需要注册后才可以使用。注册主要分全局注册和局部注册两种。
其中,全局注册的组件在任何的Vue实例中都可以使用,而局部注册的组件只能在当前实例使用。
全局注册代码:
Vue.component("my-component",{
//选项
})
//my-component是自定义的组件名:推荐使用小写加短线形式(因为在html中是不区分大小写)
//接下来会介绍组件中的选项
在这儿要讲一下Vue组件模版的限制
比如<table>
内规定只能使用<tr>,<td>,<th>
等这些元素,所以在<table>
内直接套组件是无效的,所以需要使用特殊的is属性来挂载组件
<div id="app">
<table>
<tbody is="my-component"></tbody>
</table>
</div>
Vue.component("my-component",{
template:"<div>这里是组件内容</div>"
})
new Vue({
el:"#app"
})
//<tbody>在渲染时,会被替换为组件内容。
//这种限制还包括<ul>,<ol>,<select>
可以发现我在上实例中用到了一个template选项,指的是我们组件的模版,其中template的DOM结构必须包含一个元素,比如上实例的template中没有<div></div>
是无法渲染的。
除了template选项外,组件中的选项还有data , computed , methods 等。
但是在组件中的data和Vue实例中的data大有区别,组件中的data是函数,会将数据return出去。
<div id="app">
<my-component></my-component>
</div>
Vue.component("my-component",{
template:"<div>{{message}}</div>",
data : function(){
return {
message : " 组件内容"
}
}
})
new Vue({
el:"#app"
})
根据JS对象的引用关系,如果return出的对象引用的是一个外部的对象,那这个对象就是共享的,任何一个地方修改都会同步。
使用props传递数据
组件不仅是将模版的内容进行复用,更重要的是组件之间进行通信。
props是组件用来接收父组件传递来的数据的,通过props传递的数据是单向的(也就是说父组件数据变化时可以传递给子组件,但是反过来子组件是不可以传递给父组件的——单向数据流)