我有一些函数需要在 vue 组件被销毁时调用,但在事件创建之前我不一定知道它们是什么。
有没有办法为 vue 生命周期事件动态添加监听器?
我要实现的目标:
...methods: {
logOnDestroy(txt) {
this.$on('beforeDestroy', () => {
console.log(txt)
}
}
}
但是目前还没有调用它。有没有其他方法可以在运行时以编程方式将监听器绑定(bind)到组件生命周期事件?
最佳答案
你可能会问,能不能简单点?
来自 Vue.js Component Hooks as Events , 这就是你要找的语法
this.$once('hook:beforeDestroy', () => {
我不确定您打算如何使其动态化,但这里是对 Vue CLI 的默认 HelloWorld 应用程序中的 logOnDestroy()
方法的改编,
演示
Vue.component('helloworld', {
template: '<h1>{{ msg }}</h1>',
name: 'helloworld',
props: { msg: String },
mounted() {
this.logOnDestroy('Goodbye HelloWorld')
},
methods: {
logOnDestroy(txt) {
this.$once('hook:beforeDestroy', () => {
console.log(txt)
})
}
}
});
new Vue({
el: '#app',
data: {
showHello: true
},
mounted() {
setTimeout(() => {
this.showHello = false
}, 3000)
}
});
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://unpkg.com/vue"></script>
<div id="app">
<img alt="Vue logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/277px-Vue.js_Logo_2.svg.png" style="height: 50px;">
<helloworld v-if="showHello" msg="Welcome to Your Vue.js App"/>
</div>
关于javascript - 如何动态添加 Vue 生命周期监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48931936/