<!-- 用柵格布局實現的單選框 --> <template><!--v-model默認綁定:value="value" @change="value = $event.target.value"--><el-radio-group :value="value" @input="handleChange" style="width: 100%"><el-row><el-colv-for="option in options":key="option.label":span="span"style="min-width: 150px"><el-radio :label="option.value" :border="border" :size="radioSize">{{ option.text }}</el-radio></el-col></el-row></el-radio-group> </template><script> export default {name: "GridRadio",props: {/*父子組件傳值 類型可以是string bool 數字型登登*/value: { type: String | Number | Boolean, required: true, default: null },/*同上*/options: { type: Array, required: true },/*同上*/border: { type: Boolean, default: false },/*同上*/span: { type: Number, default: 4 },/*控制大小*/radioSize: { type: String, default: "medium" }},/*只是把父親的綁定的value數值變成value 父親的v-model的方法變為change的* 當自己的數值變化的時候 觸發父親的事件 change*/model: {/*改變默認得事件 :value="value" @change="value = $event.target.value"*/event: "change",prop: "value"},data() {return {};},methods: {handleChange(val) {/*綁定change事件*//*數值綁定change得事件可以進行傳值*/this.$emit("change", val);console.log(1)}} }; </script><style scoped></style>

? /*只是把父親的綁定的value數值變成value 父親的v-model的方法變為change的
? * 當自己的數值變化的時候 觸發父親的事件 change*/

總結

以上是生活随笔為你收集整理的工作277:v-model实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。