将v模型插入vuejs元素

时间:2017-08-16 08:50:16

标签: javascript vue.js vuejs2

我试图做这样的事情,不知道如何用技术术语描述,似乎找不到解决方案。

postfix-expression:
  primary-expression
  postfix-expression [ expression ]
  ...

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

1 个答案:

答案 0 :(得分:2)

你可以将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