欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 单选框与单选框组 组件

程序员文章站 2024-01-26 22:19:10
radio组件 v-model : 通过当然绑定的值与input上的value值来确定当前选中项。 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父作用域,告知当前选中项.(自定义组件 v-model 数据双向绑定) radioGroup组件 把ra ......

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