如何在Vue中为html代码创建组件？

所以我有这样的代码：如何在Vue中为html代码创建组件？

<div class="input-field col s12 m6 l6"> 
    <input id="txtboxid" type="text" v-model="full_name"> 
    <label for="txtboxid">Middle Name *</label> 
</div>

而且我有很多的不同的ID和型号的和我的HTML文件看起来大。有没有办法在vuejs中缩短它？就像一条线，它会有那些？任何帮助将非常感激。

来源

2017-02-10 FewFlyBy

只需我2美分，把你的ID和名称放入一个对象或数组中，使用v-for循环它们。 ID可以通过使用v-bind来设置。 – choasia

@choasia ha！我喜欢这个想法。 – FewFlyBy

用Vue查看[fiddle]（https://fiddle.jshell.net/mimani/ajy0e03c/）。请享用！ – Saurabh

正如你在这个问题本身所指出的，你可以在Vue.js创建可重用components，再次和再次使用相同的HTML模板。您可以从您的代码的简单VUE component如下：

Vue.component('child', { 
    template: '\ 
    <div class="input-field col s12 m6 l6"> \ 
    <input :id="id" type="text" v-model="value"> \ 
    <label for="txtboxid">Middle Name *</label> \ 
</div> \ 
    ', 
    props: [ 
     "id", "value"], 
    watch: { 
    value: function(newVal){ 
     this.$emit('input', newVal) 
    } 
    } 
})

，它可以在你的HTML只需使用单一行中使用：

<child v-model="full_name" id="24"></child>

请检查工作小提琴手here。

在我使用watch上面的代码，你也可以使用event handler上改变@change得到full_name父更新，演示here。

一些解释：

我使用v-model这里。 <input v-model="something">这里，基本上是语法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

您可以在组件中使用它来创建组件和v-model发送您varaible并接受它作为props。

来源

2017-02-10 04:18:18 Saurabh

我认为一个特定的事件处理程序（比如'v-on：input'）比'watch'好。很好的回答，虽然 – Phil

@菲尔感谢您的建议，我已经改变了代码，请看看[这里]（https://fiddle.jshell.net/mimani/ajy0e03c/1/）。 – Saurabh

当您在文本框中输入内容时，是否在控制台中看到警告消息？ @Saurabh – FewFlyBy

如何在Vue中为html代码创建组件？

回答

相关问题