概述
vue中的组件一个很强大的功能,类似react一样的思想可以让我们开发出高复用的组件,提高我们的开发效率。
注册
vue中的组件分为全局注册和局部注册两种。
全局注册:
Vue.component(
"cpt"
,{
template:"<div></div>"
}
);
局部注册:
let v=new Vue({
el:"#v"
,components:{
cpt:{
template:"<div></div>"
}
}
});
组件使用的时候必须包含在一个vue实例里,并且必须经过实例化
<div id="v">
<cpt></cpt>
</div>
let v=new Vue({
el:"#v"
});
输出结果为
<div id="v">
<div></div>
</div>
data的使用
有时我们需要在组件中包含一些自定义的数据可以这样做
<div id="v">
<cpt></cpt>
</div>
Vue.component("cpt",{
template:"<div>{{someText}}</div>"
,data:function(){
return {
someText:"text"
}
}
});
new Vue({
el:"#v"
});
输出结果为
<div id="v">
<div>text</div>
</div>
注意data必须为一个函数,且返回一个对象。