javascript - 将 v-model 插入 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 中，因为它是部分的，并且在整个应用程序中共享。有没有办法在需要时将其注入(inject)到特定页面上？

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有关组件的更多信息