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

转载于:https://www.cnblogs.com/whnba/p/10622300.html

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值