如何将单选按钮选项从组件传递给父组件？

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>

如何将单选按钮选项从组件传递给父组件？

How to pass from a component to the parent a radio button choice?

javascript

vue.js

vue-component