提示信息

vue,页面加载时,子组件自动向父组建发送消息

韦茗雯 已关注

在 Vue 中,如果你想要在页面加载时让子组件自动向父组件发送消息,你可以在子组件的生命周期钩子中触发一个事件。

下面是一个简单的例子:

  1. <!-- 子组件 -->
  2. <template>
  3. <div>...</div>
  4. </template>
  5. <script>
  6. export default {
  7. mounted() {
  8. this.$emit('loaded')
  9. }
  10. }
  11. </script>

在这个例子中,我们使用了 mounted 生命周期钩子。当组件被挂载到 DOM 之后,mounted 钩子将会被调用,然后我们在其中触发了一个名为 'loaded' 的事件。

在父组件中,你可以监听这个事件,并在事件触发时执行一个方法:

  1. <!-- 父组件 -->
  2. <template>
  3. <ChildComponent @loaded="handleLoaded"/>
  4. </template>
  5. <script>
  6. import ChildComponent from './ChildComponent.vue'
  7. export default {
  8. components: {
  9. ChildComponent
  10. },
  11. methods: {
  12. handleLoaded() {
  13. console.log('Child component has loaded.')
  14. }
  15. }
  16. }
  17. </script>

在这个例子中,当 'loaded' 事件被触发时,父组件将执行 handleLoaded 方法。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
韦茗雯 关注 已关注

最近一次登录:2023-12-09 21:09:09   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图