封装el-drawer时遇到的问题,及解决方案

方法1:


父组件
<template>
  <div id="app">
      <el-button type="success" @click="success">成功按钮</el-button>
      <drawer :isDrawer.sync='isDrawer' />  
  </div>
</template>

isDrawer: false,

 success() {
     this.isDrawer = true
 },

子组件
        <el-drawer
        title="我是标题"
        :wrapperClosable='false'
        :visible.sync="isShow"
        :show-close='true'
        @close='upIsShow'
        :with-header="true">
        <span>我来啦!</span>
        </el-drawer>

 props:{
        isDrawer: {
            type: Boolean,
        }
    },
    data() {
        return {
            isShow:false
        }
    },
    methods: {
        upIsShow() {
            this.$emit('update:isDrawer',false)//修改isDrawer的值
        }
    },
    watch: {
        isDrawer:{  //vue是单项数据流,不推荐在子组件中修改父组件传过来的数据,因此监听父组件传                    
                     递过来的参数,动态给drawer赋值
            handler(newValue){
                this.isShow = newValue
            }
            
        }
    }

方法2:

父组件

<template>
  <div id="app">
      <el-button type="success" @click="success">按钮</el-button>
      <drawer :object.sync='object' />
  </div>
</template>


<script>
import drawer from './components/drawer'

export default {
  name: 'App',
  components: {
    drawer
  },
  data() {
    return {
      object:{
        isDrawer: false,
      }
    };
  },
  methods:{
    success() {
      this.object.isDrawer = true
    },
  }
}
</script>

子组件

<template>
  <div>
      <el-drawer
        title="我是标题"
        :wrapperClosable='false'
        :visible.sync="object.isDrawer"
        :show-close='true'
        @close='upIsShow'
        :with-header="true">
        <span>我来啦!</span>
        </el-drawer>
 
  </div>
</template>


<script>
export default {
    props:{
        object: {
            type: Object,
        }
    },
    data() {
        return {
            isShow:false
        }
    },
    methods: {
        upIsShow() {
            this.$emit('update:isDrawer',false)
        }
    },
}
</script>