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

在vue组件和vue实例之间进行通信

1 个答案: