组件之间双向绑定

2021-09-07 12:03:38 阅读：114 来源： 互联网

标签：default 绑定 value 复选框 export result 双向组件

<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>

效果图

标签：default,绑定,value,复选框,export,result,双向,组件
来源： https://www.cnblogs.com/zhangjianhua26/p/15237528.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件之间双向绑定