Vue.js에 DRY 유지

Question

나는 작년에 React와 함께 몇 가지 프로젝트를 수행했으며 현재 단순한 Vue로 전환했습니다. 현재 단순한 Vue로 전환했습니다. 코드를 작동시킬 필요가 없으므로보다 유연하게 작업 할 수 있습니다. (정확히 말하자면 은에 반응이 있어야합니다. JSX를 사용할 필요가 없습니다. 당신이하지 않으면 큰 이점 중 하나).

어쨌든, 필자가 React에서 빠뜨린 것 중 하나는 템플릿에서 반복되는 것을 피하기 위해 코드 조각을 재사용하는 방법입니다. 그렇지 않으면 내가로 사용 싶어, 내가 사업부에서 포장 싶어 특정 상황에서

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

:이 질문을하라는 메시지가 구체적인 상황은이 같은 사용자 정의 입력 요소가 템플릿했다 입니다. 반작용으로, 단순히 다음과 같이 변수에 뭔가를 저장할 것 :

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를 사용하지 않으면 똑같은 일을 할 수 있습니까?

<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 재사용 가능한 구성 요소, 파 요구로 사용할 수 있습니다 : 나는 현재 내 기분을 상하게 다음과 같이이 뷰에 뭔가에 대한 있습니다.

당신은 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 템플릿으로 컴파일되지 않습니다.

:

이제

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 렌더링 할 수 있습니다 divSituation을 다음과 같이 :

는

당신은 당신의 변수 파로서 HTML 문자열을 반환하는 계산 된 속성을 가질 수있다

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

체크 아웃 작업 fiddle.