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