Javascript 将v型模型插入到vuejs元素中

我正在尝试这样做，不知道如何用技术术语来描述，似乎找不到解决这个问题的方法

<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>

ABCDEFG
新Vue({
el:“#应用程序”，
数据：{'model1'：'value'}，
...
...
...
});

---

如何将model2元素添加到我的应用程序数据中？我不想将我的model2包装在#应用程序中，因为它是一个部分，并且在整个应用程序中共享。有没有一种方法可以在需要时将其注入到特定页面上？

您可以将该

model2

div作为一个单独的组件，以便可以在任何地方重复使用，如下所示：

html

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

---

有关组件的详细信息，请参见。您可以将

model2

div作为一个单独的组件，以便可以在任何地方重复使用，如下所示：

html

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

有关组件的详细信息，请参见

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