vue el-drawer进入重新加载、关闭销毁
vue进入项目时会加载所有组件,导致加载时间长。但是有些组件可以通过自己点击等操作再加载。
!组件重新进入时需要重新调用方法或者初始数据。
如果不销毁组件的话,可以通过watch来控制抽屉组件的visible来实现以上功能。
使用v-if来控制组件是否允许加载
一. 父组件v-if控制子组件加载和销毁,子组件抽屉一直是打开状态。点击打开父组件允许子组件加载,子组件抽屉关闭时emit调用父组件销毁子组件的方法。简单但是不能用抽屉组件自带的关闭方法(点击遮罩层和右上角的x关闭)。
父组件
<!-- html -->
<el-button @click="openDrawer ">打开抽屉</el-button>
<DemoDrawer v-if="drawer" @closeDrawer="closeDrawer" />
data () {
return {
drawer: false,
}
},
methods: {
openDrawer () {
this.drawer = true
},
// 子组件调用父组件该方法来关闭抽屉
closeDrawer (value) {
this.drawer = value
}
}
子组件
<el-drawer class="eldrawer" :visible="true" >
<el-button @click="close">关闭抽屉</el-button><br />
</el-drawer>
methods: {
close () {
this.$emit('closeDrawer', false)
}
}
二. 父组件v-if控制子组件加载和销毁,但是子组件抽屉控制自己打开和关闭,这样可以用组件自带的关闭方法。点击打开父组件允许加载子组件,同时refs调用子组件打开抽屉方法(!一定要子组件加载完才能调用子组件方法)。子组件关闭抽屉时调用自己关闭抽屉方法,同时调用父组件销毁子组件的方法。
父组件
<!-- html -->
<el-button @click="open">打开抽屉</el-button>
<DemoDrawer v-if="drawer" ref="demoDrawer" @closeDrawer="closeDrawer" />
data () {
return {
drawer: false,
}
},
methods: {
open () {
this.drawer = true
this.$nextTick(() => {
this.$refs.demoDrawer.open2()
})
},
/* async open () {
await (() => {
this.drawer = true
})()
this.$refs.demoDrawer.open2()
}, */
// 子组件调用父组件该方法来关闭抽屉
closeDrawer (value) {
this.drawer = value
},
}
子组件
<el-drawer
class="eldrawer"
:visible.sync="childDrawer"
:before-close="handleClose"
>
<h1>childDrawer</h1>
<span>{{ num }}</span>
<button @click="num++">+1</button>
<el-button @click="close">关闭抽屉2</el-button><br />
</el-drawer>
mounted () {
console.log('我是子组件,num也重置了');
},
data () {
return {
childDrawer: false,
num: 0,
}
},
methods: {
close () {
this.childDrawer = false
this.$emit('closeDrawer', false)
},
open2 () {
this.childDrawer = true
},
handleClose () {
this.close()
}
}