vue 组件更新父级参数组件参数双向绑定

绝地灬酷狼 2022-03-14 23:43 212阅读 0赞

**方法一    **

**方法实现主要涉及.sync  $emit   ****需要新版本的支持（2.3.0+ 新增）****，实现原理实际和方法二一样 ** **注意大小写与-的转换**

**官方解释：**[https://cn.vuejs.org/v2/guide/components-custom-events.html][https_cn.vuejs.org_v2_guide_components-custom-events.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70][]

<button-counter  :panel.sync="panelShow"></button-counter>
    
    
    
    
    
    // 组件
    Vue.component('button-counter', {
        props: {
            panel: {
                type: Boolean,
                default:true,
            }
    
        },
        methods: {
            hidePanel() {
                this.$emit('update:panel', false)   // 魔法方法  需要最新vue支持
            }
        },
    
        template: '<div v-show="panel" id="pop_ups">ceshi<div @click="hidePanel" class="close"></div></div>'
    });

**方法二**

**该方法的好处是  每次更新需要先调用****closeDialog方法，而在这个方法内可以再次自定义一些事件处理，比如确认是否关闭**

**自由度比较高**

//  父级
    <button-counter  :panel="popStatus" @on-close="closeDialog"></button-counter>
    
    
    data{
    popStatus:true
    },
    methods: {
         closeDialog:function(){
            this.popStatus=false
         },
    }
    
    
    
    
    // 组件
    Vue.component('button-counter', {
        props: {
            panel: {
                type: Boolean,
                default:true,
            }
    
        },
        methods: {
            hidePanel() {
                this.$emit("on-close");
    
            }
        },
    
        template: '<div v-show="panel" id="pop_ups">ceshi<div @click="hidePanel" class="close"></div></div>'
    });

[https_cn.vuejs.org_v2_guide_components-custom-events.html]: https://cn.vuejs.org/v2/guide/components-custom-events.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70]: /images/20220315/7182024aa4d645f2aba0056cb1a5719f.png