vue 组件和 vue 实例之间的通信

Question

我刚刚开始使用 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'
});

Answer 1

欢迎来到 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>

我分叉了你的小提琴并添加了一个演示道具，只是为了让你看到它的实际效果。 Check it out.