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。