Javascript Vue.js-使用组件或类似工具删除详细的引导输入字段代码

在带有pug模板的单个文件组件中，我有许多格式相同的输入字段，例如：

 .input-group.input-group-sm
     .input-group-addon Purchase Price
      input.form-control(v-model='purchase_price')

  .input-group.input-group-sm
    .input-group-addon Net Rental Income
    input.form-control(v-model='rental_income_net')

所有输入字段都具有数据属性，这些属性在组件中使用v-model进行修改

Vue.component("cell", {
  props:["value", "title"],
  template: `
    <div class="input-group input-group-sm">
      <div class="input-group-addon">{{title}}</div>
      <input class="form-control" v-model="internalValue">
    </div>
  `,
  computed:{
    internalValue:{
      get() {return this.value},
      set(v) {this.$emit("input", v)}
    }
  }
})

我希望生成相同的格式和输出，但以某种方式提取bootstrap字段样板文件，并能够编写一些简单的内容，如：

cell(title='Purchase Price' v-model='purchase_price') 
cell(title='Net Rental Income' v-model='rental_income_net') 

上述操作不起作用，输入字段似乎不接受插槽。另外，我不想编写冗长的事件监听器，只需要编写与上面类似的整洁代码

---

这可能吗？

我不太了解帕格，所以这是香草HTML。下面是一个可以转换为单个文件组件的单元组件示例

Vue.component("cell", {
  props:["value", "title"],
  template: `
    <div class="input-group input-group-sm">
      <div class="input-group-addon">{{title}}</div>
      <input class="form-control" v-model="internalValue">
    </div>
  `,
  computed:{
    internalValue:{
      get() {return this.value},
      set(v) {this.$emit("input", v)}
    }
  }
})

Vue.component（“单元”{
道具：[“价值”、“头衔”]，
模板：`
{{title}}
`,
计算：{
内部价值：{
get（）{返回此.value}，
set（v）{this.$emit（“input”，v）}
}
}
})
谢谢你，伯特。作品以下是Vue论坛的单文件组件：

<template lang='pug'>
  .input-group.input-group-sm
    .input-group-addon {{ title }}
    input.form-control(v-model='interface')
</template>


<script>
  export default {
    props: ['title', 'value'],
    name: 'Cell',
    computed: {
      interface: {
        get(){
          return this.value
        },
        set(val){
          this.$emit('input', val)
        }
      }
    }
  }
</script>


.input-group.input-group-sm
.input组加载项{{title}
表单控件（v-model='interface'）
导出默认值{
道具：['title'，'value']，
名称：'单元'，
计算：{
接口：{
得到（）{
返回此.value
},
设置（val）{
此.$emit（'input'，val）
}
}
}
}
如果在单元组件上正确实施
v-model
，它应该可以正常工作。谢谢。如何在父级中拾取事件发射器？？我所拥有的就是：cell（title='Purchase Price'v-model='Purchase_Price'）@Branksy
v-model
侦听
输入事件。这就是它的工作原理。