vue element-ui 封装drawer 抽屉组件

子组件

<template>
    <div class="com">
        <el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction">
            <span>我来啦! {{task.name}}</span>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        props:{
            task:{
                type:Object,
                default:()=>{}
            },
            drawer:{
                type:Boolean,
                default:false
            },
            direction:{
                type:String,
                default:'rtl'
            }
        },
        data(){
            return {
            }
        },
        computed: {
            drawer_:{
                get(){
                    return this.drawer
                },
                set(v){
                    this.$emit("changeDrawer",v)
               }
            }
        },
    }

</script>
<style scoped>
</style>

父组件 及调用

<task-form @changeDrawer="changeDrawer" :task="taskFormData" :drawer="drawer" :direction="direction"></task-form>

  data() {
            return {
                taskData: [],// 任务数据
                drawer: false,
                direction: 'rtl',
                taskFormData:{}
            }
        },
        methods: {
            changeDrawer(v){
                this.drawer = v;
            },
　　　　}

由于prop传值是单向的 在computed中定义 get及set