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