组件之间双向绑定


  <!-- 子组件SelectArea -->
<template>
    <div class="select-area">
        <van-checkbox-group v-model="result">
            <van-checkbox name="a">复选框 a</van-checkbox>
            <van-checkbox name="b">复选框 b</van-checkbox>
            <van-checkbox name="c">复选框 c</van-checkbox>
        </van-checkbox-group>
    </div>
</template>

<script>
/**  @description:双向绑定  **/
export default {
    props: {
        // 组件实现双向绑定
        value: {
            type: Array,
            default() {
                return []
            },
        },
    },
    computed: {
        result: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit(input, val)
            },
        },
    },
}
</script>
<!-- 子组件Model -->
<template>
    <div> <input :value="value" @input="handlerChange" /> </div>
</template>

<script>
/**  @description:input实现双向绑定  **/
export default {
    props: [value],
    // 可以修改事件名,默认为 input
    model: {
        event: updateValue,
    },
    methods: {
        handlerChange(e) {
            this.$emit(updateValue, e.target.value)
        },
    },
}
</script>
父组件引用
<
template> <div class="home"> <Model v-model="value" /> {{ value }} <SelectArea v-model="result" /> {{ result }} </div> </template> <script> import Model from @/components/demo/Model import SelectArea from @/components/demo/SelectArea
export default { components: { Model, SelectArea, }, data() { return { value: 1, result: [], } }, } </script>

 效果图

组件之间双向绑定

 

组件之间双向绑定

上一篇:编码规约(四)OOP 规约


下一篇:node和npm版本管理