子组件内容:
<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>
标签:Vue,ChildRadio,单选框,export,picked,valueName,组件,model From: https://www.cnblogs.com/ZhouxsCode/p/16788481.html