【vue】vue子组件修改父组件数据，不使用v-model的形式

这是我项目中自己实现的一个抽屉，感兴趣的可以复制使用（diaCounts是我挂在Vue.prototype下的一个全局变量），父组件传入参数时用 [变量名].sync,子组件触发变化时用$emit(‘update:变量名’, false)可以直接修改父组件数据，这是子组件直接修改父组件数据的其中一种方式。
父组件：

<template>
	<Drawer :visible.sync="dataVisible"></Drawer>
	<div @click="changeVisible">切换</div>
</template>
<script>
import Drawer from './components/test.vue'
export default {
	components:{Drawer},
	data(){
		return {
			dataVisible:false,
		}
	},
	methods:{
		changeVisible(){
			this.dataVisible = !this.dataVisible
		}
	}
}
</script>

子组件：

<template>
    <transition name="dia_fade_d">
        <div class="drawer_cover_yy" :style="{'z-index':getZIndex(),'width':width||'856px'}" v-show="visible" @click.self="clickSelf">
            <div class="draw_wrapper_yy" :style="{'width':width||'856px'}">
                <div class="draw_wrapper_yy_close" @click="close"></div>
                <slot></slot>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    props:{
        width:String,
        title:String,
        top:String,
        visible:{
            type:Boolean,
            default:false
        },
        showClose:{
            type:Boolean,
            default:false
        },
        beforeClose:Function,
        closeOnClickModal:{
            type:Boolean,
            default:false
        },
    },
    data(){
        return {
        }
    },
    methods:{
        getZIndex(){
            return this.$root.diaCounts++
        },
        close(){
            if(typeof this.beforeClose == 'function'){
                this.beforeClose()
            }else {
                this.$emit('update:visible', false);
            }
        },
        clickSelf(){
            if(this.closeOnClickModal){
                this.$emit('update:visible', false);
            }
        },
    },
}
</script>
<style lang="scss">
.dia_fade_d-enter-active {
  right: 0;
  animation: dia_fade_enter 0.3s;
}
 .dia_fade_d-leave-active {
  right: 0;
  animation: dia_fade_leave 0.3s;
}
@keyframes dia_fade_enter {
    0% {transform:translateX(100%);opacity: 0;}
    100% {transform:translateX(0);opacity: 1;}
}
@keyframes dia_fade_leave {
    0% {transform:translateX(0);opacity: 1;}
    100% {transform:translateX(100%);opacity: 0;}
}
.drawer_cover_yy {
    height: calc(100vh - 64px);
    position: fixed;
    right: 0;
    top: 56px;
    background-color: rgba(0,0,0,0.3);
    // overflow: auto;
    .draw_wrapper_yy {
        width: 100%;
        height: 100%;
        background: #ffffff;
        position: absolute;
        right: 0;
        top: 0;
        // overflow: auto;
        box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.1);
        .draw_wrapper_yy_close {
            width: 32px;
            height: 32px;
            position: absolute;
            right: 16px;
            top: 16px;
            cursor: pointer;
            background:url(./img/close.png);
            background-size: 32px 32px;
        }
    }
}
</style>

上一篇：怎么给vue自定义组件加上v-model？
下一篇：vue用了keep-alive声明周期只执行一次怎么办？