vuejs要素にvモデルを挿入する

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> 

#appデータにmodel2要素を追加するにはどうすればよいですか？部分的で、アプリケーション全体で共有されているので、#appの中にmodel2をラップしたくありません。それが必要なときに特定のページに挿入できる方法はありますか？

Answer 1

あなたは、それはどこでもあなたがこのようにしたい、再利用することができるoを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を参照してください。