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>

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

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

Communicating between vue component and vue instance

javascript

vue.js

vue-component