正文
Vue 单选框与单选框组 组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
radio组件
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>
radioGroup组件
把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
