我們在前面講了很長篇幅的元件,那元件可以分為局部註冊跟全域註冊,前面的方式我們都是採用全域註冊,而所謂的全域就是指,當我在新增一個 Vue
的應用程式時,它也可以使用這個元件,那局部的意思就是指,我們只想給當前這個應用程式做使用,如果要這樣使用,我們就要改寫如下:
<script>
var child = {
props: ['person'],
template: '#rowComponentTemplate'
}
var app = new Vue({
data: {},
components: {
'row-component': child
}
});
</script>
不同於前面的是,我們新增了一個 child
變數為物件,裡面放置的就是我們本來 Vue.component()
內的內容
而我們在當前的 Vue
應用程式內在 data
後面,新增了一個 components
屬性,左邊放置新增的元件名字,右邊放置我們在上層新增的 child
變數,這時後我們的元件就會變成局部的了
另外在元件的使用上,如果有使用到 data
這個屬性,一定要搭配 function return
的用法:
<script>
var child = {
data: function(){
return ...
},
props: ['person'],
template: '#rowComponentTemplate'
}
var app = new Vue({
data: {},
components: {
'row-component': child
}
});
</script>
以上是元件另外補充的部分