Vue框架整理:全域性元件、區域性元件、特殊元件建立方法
阿新 • • 發佈:2019-02-07
vue的元件也是需要註冊後才可以使用的,註冊有全域性註冊和區域性註冊兩種;
全域性元件註冊後,任何vue例項都可以用:
<div id="v1">
<first-component></first-component>
</div>
<script src="vue.min.js"></script>
<script>
//first-component就是元件中自定義的標籤名,一般用小寫或者加- 比較多一點
Vue.component('first-component' ,{
//這裡必須是被一個元素包含的內容,否則無法渲染
template:"<div>第一個元件的內容</div>"
});
var v1=new Vue({
el:"#v1"
});
</script>
效果圖:
區域性元件註冊後,只有在設定對應的例項內才可以使用,也可以使用components選項來註冊元件,使元件巢狀
<div id="v1">
<v-com></v-com>
</div>
<script src="vue.min.js"></script>
<script>
var comEle={
template:"<h2>區域性元件TEXT</h2>"
};
var app=new Vue({
el:'#v1',
components:{
'v-com':comEle
}
})
</script>
顯示效果:
需要注意的是,元件模板有時會受到HTML的限制,比如< table >標籤內只能放< tr >< td >等,或者ul、ol 、select 、等
這種情況下可以使用特殊的 is
<div id="v1">
<table>
<tbody is="v-com"></tbody>
</table>
</div>
<script src="vue.min.js"></script>
<script>
var comEle={
template:"<h3>特殊元件TEXT</h3>"
};
var app=new Vue({
el:'#v1',
components:{
'v-com':comEle
}
})
</script>
顯示效果:
建立元件時,除了template選項,也可以使用像例項中的其他選項,比如data, computed, methods等,這裡需要注意是data的用法:
data必須是函式,通過return的方式傳遞資料:
<div id="v1">
<v-com></v-com>
</div>
<script src="vue.min.js"></script>
<script>
Vue.component('v-com',{
template:"<h3> {{ content }} </h3>",
data:function () {
return{
content:"data元件內容"
}
}
});
var app=new Vue({
el:'#v1'
})
</script>
效果圖: