vue,页面加载时,子组件自动向父组建发送消息
在 Vue 中,如果你想要在页面加载时让子组件自动向父组件发送消息,你可以在子组件的生命周期钩子中触发一个事件。
下面是一个简单的例子:
<!-- 子组件 -->
<template>
<div>...</div>
</template>
<script>
export default {
mounted() {
this.$emit('loaded')
}
}
</script>
在这个例子中,我们使用了 mounted
生命周期钩子。当组件被挂载到 DOM 之后,mounted
钩子将会被调用,然后我们在其中触发了一个名为 'loaded' 的事件。
在父组件中,你可以监听这个事件,并在事件触发时执行一个方法:
<!-- 父组件 -->
<template>
<ChildComponent @loaded="handleLoaded"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleLoaded() {
console.log('Child component has loaded.')
}
}
}
</script>
在这个例子中,当 'loaded' 事件被触发时,父组件将执行 handleLoaded
方法。