vue.js 2 두 개의 다른 부모 변수로 구성 요소 다시 사용

Question

프로그래밍 언어로 수년 간의 경험을 변경하는 구성 요소를 사용하려고합니다. ir 명령을 사용하려면 몇 개의 버튼을 사용하여 년을 더하거나 뺍니다. 그리고 언어를 전달하는 '기술'소품을 사용합니다. 즉 : PHP, JS 등

<script type="text/template" id="years_template"> 
<div> 
    <p>How mane years of experience with {{ tech }} do you have?</p> 

    <p> 
     Answer: <strong>{{ years }}</strong> 

     <button type="button" 
       class="btn" 
       @click="add">+</button> 

     <button type="button" 
       :disabled="years == 0" 
       class="btn" 
       @click="sub">-</button> 
    </p> 
</div> 
</script> 

내 전역 변수가 years_php 및 years_JS, 그리고 메신저 구성 요소 "년 - 특급"을 재사용하려고 그렇게 하나 하나는 각각의 전역 변수를 변경합니다. 나는 this 자습서를 따라 그들 중 하나를 할 수있다. 그러나 years-exp 컴포넌트를 하나의 방출 및 청취 이벤트로 재사용하고 싶을 때, 항상 years_php 변수를 수정 했으므로 '테스트'소품을 사용하고 다른 케이스에 대한 값을 확인해야했습니다. 여기에 내 년 EXP가 있습니다. 구성 요소 :

Vue.component('years-exp', { 
    template: '#years_template', 
    data(){ 
     return { 
     years : 0 
     } 
    }, 
    watch:{ 
     'years': function(years, oldYears){ 
     console.log('years changed from %s to %s', oldYears, years) 
     switch (this.test) { 
      case "years_php": 
      bus.$emit('PHPyears-changed', years); 
      break; 
      case "years_js": 
      bus.$emit('JSyears-changed', years); 
      break; 
     } 
     }, 
    }, 
    methods: { 
     add: function() { 
      this.years++; 
     }, 
     sub: function() { 
      this.years--; 
     }, 
    }, 
    props: ['test','tech'] 
}); 

그리고 내 뷰 인스턴스에 다음 코드를 추가

created: function() { 
     // store this to use with Vue.set 
     var temp = this; 
     bus.$on('PHPyears-changed', function (years) { 
     Vue.set(temp, 'years_php', years); 
     //Vue.set(temp, 'years_js', years) 
     }); 
     bus.$on('JSyears-changed', function (years) { 
     Vue.set(temp, 'years_js', years); 
     //Vue.set(temp, 'years_js', years) 
     }) 
    }, 

그리고 여기에 내가 HTML에 삽입 :

<years-exp test="years_php" tech="PHP"></years-exp> 
    <years-exp test="years_js" tech="JS"></years-exp> 

V에서이 작업을 수행하는 또 다른 방법이 있나요 ue.JS 2+?

Answer 1

VueJS 2는 부모 - 자식 통신을 처리하기 위해 이벤트 패턴을 사용합니다. 기본적으로 자녀와 부모가 의사 소통을하려면 반드시 bus이 필요하지는 않습니다. 당신은 다음을 수행 할 수 있습니다

당신이 계층 구조에서 부모 위의 구성 요소에 이벤트를 보내야 할 경우

//your re-usable component code 
this.$emit('years-changed', years); 


//your component that uses <years-exp> (parent of years-exp) 
<years-exp test="years_php" tech="PHP" @years-changed="handleYearsChanged"></years-exp> 

methods:{ 
    handleYearsChanged:function(yearsValueFromChild){ 
    //here you receive exactly the value you sent via $emit in child 
    } 
} 

다음은이 bus하지만 부모 - 자식 통신이 꽤 간단한 패턴을 사용할 수 있습니다 사용하는 것 .