zoukankan      html  css  js  c++  java
  • 组件之间双向绑定

    
    
      <!-- 子组件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>

     效果图

  • 相关阅读:
    ASP.NET Core 2.2 基础知识(七) 选项模式
    ASP.NET Core 2.2 基础知识(六) 配置(内含MySql+EF)
    ASP.NET Core 2.2 基础知识(五) 环境
    ASP.NET Core 2.2 基础知识(四) URL重写中间件
    shell 环境变量
    shell 数值运算
    shell IF分支判断语句
    WINDOWS 端口查看
    mybatis-ResultMappingResolver类信息
    shell 基本概述
  • 原文地址:https://www.cnblogs.com/zhangjianhua26/p/15237528.html
Copyright © 2011-2022 走看看