將v模型插入vuejs元素

Question

我正在嘗試這樣做，不知道如何描述技術術語，似乎無法找到解決方案。

<div id="app"> 
    <input type="text" v-model="model1" /> 
</div> 

<div> 
    <div id="model2">ABCDEFG</div> 
    <input type="text" /> 
</div> 

<script> 
new Vue({ 
     el: '#app', 
     data: {'model1': 'value'}, 
... 
... 
... 
}); 
</script> 

如何將model2元素添加到我的#app數據中？我不想將我的model2封裝在#app中，因爲它是一個部分，並且在應用程序中共享。有什麼辦法可以在需要時將其注入特定頁面？

Answer 1

您可以使model2 div的一個單獨的組件○，它可以在任何地方，你想這樣被重用：

HTML

<div id="app"> 
    <input type="text" v-model="model1" /> 
    <reusable-comp></reusable-comp> 
</div> 

腳本

<script> 

var reusableComp = { 
    template: ` 
     <div id="model2"> 
      <div>ABCDEFG</div> 
      <input type="text" /> 
     </div> 
    `, 
    data(){ 
     return{ 
      //reactive properties for this component 
     } 
    } 
} 


new Vue({ 
     el: '#app', 
     data: {'model1': 'value'}, 
     components:{ 
      reusableComp 
     } 
... 
... 
... 
}); 
</script> 

你也可以註冊爲這樣的全球組件

Vue,.component('reusableComp',{ //...options })` 

更多關於組件

見 docs