vue.js 2 Повторное использование компонента с двумя разными родительскими переменными

Question

Я пытаюсь использовать компонент, который меняет многолетний опыт работы с языком программирования. Чтобы сделать это, я использую пару кнопок для добавления и вычитания лет, а также «tech» для передачи языка. то есть: 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_p и years_JS, и им пытается повторно использовать компонент «года-EXP», так что каждый человек меняет каждый глобальные переменный. Я могу сделать один из них, следуя руководству this. Однако, когда я хотел повторно использовать компонент years-exp только с одним событием emit и listen, он всегда менял переменную years_php, поэтому мне пришлось использовать «test» prop и проверить его значение для разных случаев, вот мои годы-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'] 
}); 

И добавьте следующий код в моем Vue например:

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 но родитель-потомок связи вы можете использовать это довольно простой шаблон ,