iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手初探 Vue系列 第 16

鐵人賽Day17 - Vue.js 基礎元件認識 -2

  • 分享至 

  • xImage
  •  

我們在前面講了很長篇幅的元件,那元件可以分為局部註冊跟全域註冊,前面的方式我們都是採用全域註冊,而所謂的全域就是指,當我在新增一個 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>

以上是元件另外補充的部分


上一篇
鐵人賽Day16 - Vue.js 基礎元件認識
下一篇
鐵人賽Day18 - props 的型別
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言