コンポーネントから親にラジオボタンの選択肢を渡す方法は？

Question

コンポーネント内にparent-child communicationを複製しようとしています。アイデアは、ラジオボタンに基づく2選択肢の成分を持つように、数回再使用される：

Vue.component('chooser', { 
 
    template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>', 
 
    data: function() { 
 
    return { 
 
     picked: null 
 
    } 
 
    }, 
 
    watch: { 
 
    picked: function() { 
 
     this.$emit('picked') 
 
    } 
 
    } 
 
}) 
 

 
var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    first: null, 
 
    second: null 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="root"> 
 
    <chooser v-model="first"></chooser> 
 
    Here I want to get choice one: {{first}} 
 
    <chooser v-model="second"></chooser> 
 
    Here I want to get choice two: {{second}} 
 
</div>

私は戻って、親へのコンポーネントからの情報を得ることはありません、なぜですか？

Answer 1

$emit関数を正しく使用していません。 vモデルをエミュレートするには、 'input'（最初の引数）と対応する値（2番目の引数）の型のイベントを出力する必要があります。

Vue.component('chooser', { 
 
    template: '<form> <input type="radio" value="hello" v-model="picked"> Hello<br><input type="radio" value="world" v-model="picked"> World<br></form>', 
 
    data: function() { 
 
    return { 
 
     picked: null 
 
    } 
 
    }, 
 
    watch: { 
 
    picked: function() { 
 
     this.$emit('input', this.picked); 
 
    } 
 
    } 
 
}) 
 

 
var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    first: null, 
 
    second: null 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> 
 
<div id="root"> 
 
    <chooser v-model="first"></chooser> 
 
    Here I want to get choice one: {{first}} 
 
    <chooser v-model="second"></chooser> 
 
    Here I want to get choice two: {{second}} 
 
</div>