Question

所以我有这段代码：

<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中缩短它？就像一条线，它会有那些？任何帮助将不胜感激。

Answer 1

正如您在问题中指出的那样，您可以在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，您还可以在更改@change上使用event handler，以便在父级here中更新full_name }。

一些说明：

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

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

您可以使用它来创建组件并在v-model中发送您的变量，并在组件中接受props。

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

1 个答案: