将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