v-model : 通过当然绑定的值与input上的value值来确定当前选中项。
在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父作用域,告知当前选中项.(自定义组件 v-model 数据双向绑定)
<radio v-model="active" label="1">1</radio> <radio v-model="active" label="2">2</radio> <radio v-model="active" label="3">3</radio> <radio v-model="active" label="4">4</radio>
<template> <div class="el-radio"> <input type="radio" v-model="model" :value="label"> <label> <slot>默认值</slot> </label> </div> </template>
<script> export default { name: "radio", props: ["value","label"], // 获取父作用域中的value与label变量值 computed: { model: { get() { return this.value; // 设置单选框 选项. 是通过当前值来判断当前选中项. }, set(val) { this.$emit("input", val); // 选中单选框后,发布input事件; 这时子组件与父组件形成双向绑定. } } } } </script>
把radio包裹成一组,通过在radiogroup设置当前选中项.这时需要与radiogroup组件父作用域的active数据形成双向绑定.
<radiogroup v-model="active"> <radio label="1">1</radio> <radio label="2">2</radio> <radio label="3">3</radio> <radio label="4">4</radio> </radiogroup>
<template> <div class="el-radio-group"> <slot></slot> </div> </template>
export default { name: "radiogroup", props: ["value"] }
需要把radio组件部分进行重写,让它自己寻找自己的单选框组. 组件 与 组件组 形成数据双向绑定.
<script> export default { name: "radio", props: ["value", "label"], // 获取父作用域中的value与label变量值 computed: { model: { get() { let parent = this.group(); return parent ? parent.value : this.value; // 设置单选框 选项. 是通过当前值来判断当前选中项. }, set(val) { this.dispatch("input", val); // 选中单选框后,发布input事件; 这时子组件与父组件形成双向绑定. } } }, methods: { group() { let parent = this.$parent || this.$root; while (parent && (parent.$options.name != "radiogroup")) { parent = parent.$parent; } return parent; }, dispatch(event, val) { let parent = this.group(); if (parent) { parent.$emit(event, val); } } } } </script>
链接:https://pan.baidu.com/s/1akgueqeglgchxbqcngzeea
提取码:k1ih
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论