2017-01-10 50 views
0

我想用Vue的實例替換網站的某些部分。其中一個例子是簡單的倒計時。我用下面的語法來創建一個實例:將道具傳遞給現有標記並使用Vue.extend創建的實例

const Countdown = Vue.extend({ 

.... 

}); 

然後,在一個主文件I初始化倒計時以下方式,手動將其安裝到現有的標記:

const instance = new Countdown(); 

instance.$mount('.js-countdown'); 

的標記就是有內其他元素的簡單的div:

<div class="counter js-countdown"> ... </div> 

我的問題是我能夠道具傳遞給我的倒計時就像我可以下來它的自定義組件,因爲它是一個根Ø F中的實例:

<div class="counter js-countdown" hours="2"> ... </div> 

回答

1

通過它在選項propsData

const instance = new Countdown({ 
    propsData: { hours: 2 } 
}); 
+0

真棒!這有助於在某些情況下。但是如果我有一個計算屬性呢?例如, '

...
' 我正在使用nunjucks模板引擎。 – Goehybrid