Vue.jsのDRYを維持する

Question

私は昨年、Reactといくつかのプロジェクトを行いました。私は現在のものをVueに切り替えました。よりシンプルで、冗長性が低く、あなたのコードを翻訳する必要はありませんので、より柔軟にすることが容易です（正確には、にはに反応がありますか、JSXを使う必要はありません。あなたがしなければ大きな利点の一つです）。

とにかく、私がReactから逃していることの1つ（そして私の問題であるVueの方法を知らないこと）は、テンプレートで自分自身を繰り返すことを避けるためにコードの断片を再利用する方法です。そうでない場合は、私のようにそれを使用したいと思い、私はdivの中でそれをラップしたいと思います特定の状況で

<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を使用することができます。その後、私は、次のような何かを行うことができ

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

：反応すると、私は単純に、変数にこのような何かを、それを保存したいです。しかし、Vueロジックはこれを許可していないようです。もちろん、Vue内でJSXを使用しない限り、私はまったく同じことをすることができますか？あなたはパー要件として使用することができる再利用可能なコンポーネントのためのVUE componentsを作成することができます

<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の中で、このために私を傷つける次のようなものを持っています。

あなたは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>' 
      } 
     } 
    } 
}) 

今、あなたはちょうどこのようv-html使用してHTMLでmyInputをレンダリングすることができます。

を

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

チェックアウト作業fiddle。