什么是Hook Event?
hook event 相当于是监听vue 生命周期、通过Hook Event 可以从组件外部位组件注入额外的生命周期方法
例:模拟数据请求过程加载数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">{{message}}
<com @hook:mounted="handleHook" />
</div>
<script>
Vue.component('com', {
template: `<ul><li v-for="item in arr">{{item}}</li></ul>`,
data() {
return {
arr: []
}
},
async mounted() {
this.arr = await new Promise(resolve => {
setTimeout(() => {
resolve([1, 2, 3, 4, 5])
}, 1000);
})
},
})
new Vue({
el: '#app',
data: {
message: 'hollo world',
},
methods: {
handleHook() {
console.log("loading....");
}
},
})
</script>
</body>
</html>