如何從組件傳遞給父級的單選按鈕選項？

Question

我正試圖在組件中複製parent-child communication。這個想法是有根據的單選按鈕雙選擇組件，多次重複使用：

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-model，你應該發出一個'input'類型的事件（第一個參數）和相應的值（第二個參數）。

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>