方法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>