Vue组件上使用v-model之单选框

子组件内容：

<template>
  <div>
    <input
      type="radio"
      :id="valueName"
      :value="valueName"
      :checked="picked === valueName"
      :picked="picked"
      @click="$emit('change', $event.target.value)"
    />
    <label :for="valueName">{{ valueName }}</label>
  </div>
</template>

<script>
export default {
  props: ["picked", "valueName"],
  model: {
    prop: "picked",
    event: "change",
  },
  computed: {},
  methods: {},
};
</script>

<style>
</style>

 

 

父组件内容：

<template>
  <div>
    <child-radio
      v-for="valueName in valueNames"
      :key="valueName"
      v-model="picked"
      :valueName="valueName"
    ></child-radio>
    显示父组件单选的内容:{{ picked }} -->
  </div>
</template>

<script>
import ChildRadio from "./ChildRadio.vue";
export default {
  components: { ChildRadio },
  data() {
    return {
      picked: "", //
      valueNames: ["One", "Two", "Three"],
    };
  },
};
</script>

<style>
</style>