Question

去年我和React完成了几个项目，并且我已经转为Vue，因为它更加简洁，不那么啰嗦以及你不会这样做。 ; t必须将你的代码转换为工作，因此它更容易上手并且更灵活（嗯，准确的是你不必与React交换，没有必要使用JSX，但如果你不这样做，它会失去一个很大的好处。

无论如何，我在React中遗漏的一件事（我确定它只是忽略了Vue方式，这是我的问题）是一种重用代码片段的方法避免在模板中重复自己。提示这个问题的具体情况是一个模板，我有一个这样的自定义输入元素：

<input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" @input="handleInput"/>

在某些情况下，我想将它包装在div中，否则我想按原样使用它。使用React，我只需将其存储在变量中，如下所示：

var inp=( <input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled"
                               @input="handleInput"/>);

然后我可以做类似以下的事情：

var myInput;
if(divSituation){
  myInput=(<div>{inp}</div>);
} else {
  myInput=inp;
}

然后我可以使用myInput var。但是，Vue逻辑似乎并不允许这样做。当然，除非在Vue中使用JSX，否则我可以做同样的事情吗？我目前在Vue中有这样的东西，如下所示，这让我感到冒犯：

<template v-if="divSituation">
  <div><input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" @input="handleInput"/></div>
</template>
<template v-else>
  <input ref="input" :id='name' :name='name' :type='fieldType' class='form-control' :value="value" :readonly="readonly" :disabled="disabled" @input="handleInput"/
</template>

Answer 1

您可以为可重复使用的组件创建vue components，可以将其用作par要求。

您可以在vue docs中找到可重复使用的输入组件的示例：

<currency-input v-model="price"></currency-input>

你可以把它写成可重复使用的组件，如下所示：

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // Instead of updating the value directly, this
    // method is used to format and place constraints
    // on the input's value
    updateValue: function (value) {
      var formattedValue = value
        // Remove whitespace on either side
        .trim()
        // Shorten to 2 decimal places
        .slice(0, value.indexOf('.') + 3)
      // If the value was not already normalized,
      // manually override it to conform
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // Emit the number value through the input event
      this.$emit('input', Number(formattedValue))
    }
  }
})

您可以为只读，禁用等添加更多道具

您还可以查看element-ui的自定义输入元素，它是code。

根据您提供的示例，您可以更有效地使用v-html。使用v-html，您可以传递将呈现为HTML的HTML字符串。但是请注意：内容以纯HTML格式插入 - 它们不会被编译为Vue模板。

您可以拥有一个计算属性，该属性将返回HTML字符串作为您的变量：divSituation，如下所示：

var data = {
    templateInput: '<input ref="input" :id="name" :name="name" :type="fieldType" class="form-control" :value="value" :readonly="readonly" :disabled="disabled"   @input="handleInput"/>',
    divSituation: true,
    myInput: ''
}

var demo = new Vue({
    el: '#demo',
    data: function(){
        return data
    },
    computed: {
       getMyInput: function(){
          if(this.divSituation){
              return this.templateInput
          }
          else{
              return '<div>' + this.templateInput + '</div>' 
          }
       }
    }
})

现在，您可以使用myInput在HTML中呈现v-html，如下所示：

<div id="demo">
  <div v-html="getMyInput">
  </div>
</div>

查看工作fiddle。

在Vue.js中保持干燥

1 个答案: