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

方法一    

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

官方解释：https://cn.vuejs.org/v2/guide/components-custom-events.html

<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>'
});