Обмен данными между компонентом vue и экземпляром vue

Я только начал использовать Vue.js, и после довольно долгих попыток я не могу понять, как передать что-то из компонента в экземпляр vue. Я использую этот компонент в качестве рейтинговой системы, но не понимаю, как получить текущее значение для моего основного экземпляра (https://fiddle.jshell.net/swyuarc9/)

Vue.component('star-rating', {

  props: {
    'name': String,
    'value': null,
    'id': String,
    'disabled': Boolean,
    'required': Boolean
  },

  template: '<div class="star-rating">\
        <label class="star-rating__star" v-for="rating in ratings" \
        :class="{\'is-selected\': ((value >= rating) && value != null), \'is-disabled\': disabled}" \
        v-on:click="set(rating)" v-on:mouseover="star_over(rating)" v-on:mouseout="star_out">\
        <input class="star-rating star-rating__checkbox" type="radio" :value="rating" :name="name" \
        v-model="value" :disabled="disabled">★</label></div>',

  /*
   * Initial state of the component's data.
   */
  data: function() {
    return {
      temp_value: null,
      ratings: [1, 2, 3, 4, 5]
    };
  },

  methods: {
    /*
     * Behaviour of the stars on mouseover.
     */
    star_over: function(index) {
      var self = this;

      if (!this.disabled) {
        this.temp_value = this.value;
        return this.value = index;
      }

    },

    /*
     * Behaviour of the stars on mouseout.
     */
    star_out: function() {
      var self = this;

      if (!this.disabled) {
        return this.value = this.temp_value;
      }
    },

    /*
     * Set the rating of the score
     */
    set: function(value) {
      var self = this;

      if (!this.disabled) {
        // Make some call to a Laravel API using Vue.Resource

        this.temp_value = value;
        return this.value = value;
      }
    }
  }

});

new Vue({
  el: '#app'
});

javascript vue.js vue-component
person Tom00    schedule 11.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Добро пожаловать во Vue!

Сначала это может быть немного сложнее, но способ передачи свойств - через props. Для этого вам нужно сначала определить объект data для вашего родителя (в данном случае, вашего экземпляра приложения).

В vue-docs.
В общем, как вы это делаете:

new Vue({
  el: '#app',
  data: function () {
     return {
        foo: 'Foo'
     }
  }
});

Vue.component('bar', {
  props: { foo: String },
  template: '<span> {{ foo }}</span>'
})

... и HTML

<div id="app">
  <bar :foo="foo"></bar<
</div>

Я раздвоил вашу скрипку и добавил демонстрационную опору, чтобы вы могли увидеть ее в действии. Оцените.

person Dan Mindru    schedule 12.11.2016
comment
Вы уверены, что тот, который вы связали, работает? Ничего не произойдет, если я наведу указатель мыши на звезды. - person Tom00; 12.11.2016
comment
Я не стал реализовывать ваше решение (даже не уверен, как именно оно должно работать), я просто добавил к нему пример, показывающий, как обмениваться данными между компами. Вам решать, как реализовать правильное поведение :-) - person Dan Mindru; 12.11.2016
comment
Я смог исправить это, используя emit / on. Я думаю, ваше решение больше подходит, если вы хотите что-то передать дочернему узлу. Сказав это, спасибо за помощь :) - person Tom00; 12.11.2016
comment
Не беспокойтесь, удачи! Будьте осторожны с событиями, если у вас их слишком много, впоследствии будет очень сложно поддерживать ваш код :-) - person Dan Mindru; 12.11.2016