VueJS組件拋出警告，如果數據有家長不

我有<script type="text/x-template"...處理一個簡單的組件屬性，它有一個只有一個屬性來控制是否顯示一個div它自己的數據對象。VueJS組件拋出警告，如果數據有家長不

我收到以下警告在控制檯：

[Vue公司提醒]：屬性或方法「showDiv」沒有在實例中定義，但在引用的渲染。確保在數據選項中聲明反應數據屬性。（根實例中）

現場演示：https://jsbin.com/zucaqog/edit?html,js,output

JS：

Vue.component('my-comp', { 
    template: '#my-comp', 
    data: function() { 
     return { showDiv: false }; 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: {} 
});

如果我添加showDiv: false給母公司data對象，我不會再收到警告。但是，我想避免這樣做，因爲此數據屬性僅與組件的本地範圍有關。我有一種感覺，如果我把組件的HTML作爲template: ...一個字符串，那麼它可能會奏效，但是，我寧願它script內。

來源

2017-07-27 Ian Davis

這是因爲你有你的孩子組成的模板定義爲#app DIV的孩子。父組件看到它的模板內部有一個對showDiv變量的引用，所以它會拋出錯誤。

拉那x-template的#app DIV之外：

<div id="app"> 
    <my-comp></my-comp> 
</div> 

<script type="text/x-template" id="my-comp"> 
    <div> 
    Value of showDiv is {{showDiv}}. 
    <button @click="showDiv=!showDiv">Toggle showDiv</button> 
    </div> 
</script>

來源

2017-07-27 14:57:28 thanksd

VueJS組件拋出警告，如果數據有家長不

回答

相關問題