vue3 子组件向父组件传值之emits

最新推荐文章于 2025-05-05 15:01:52 发布

可爱的橙子大爷

最新推荐文章于 2025-05-05 15:01:52 发布

阅读量1.3k

点赞数 1

分类专栏：小吴的vue学习之路文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_42337801/article/details/123007829

版权

小吴的vue学习之路专栏收录该内容

21 篇文章

订阅专栏

本文记录了Vue中子组件如何通过`emits`向父组件传递值的实现过程。子组件定义`foldChange`事件，并在点击事件中更新状态并触发事件。父组件监听`foldChange`事件，接收到值后更新自身的折叠状态。这个例子展示了Vue组件间基本的通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习了子组件向父组件传值，在这记录一下，以防日后遗忘

子组件
...
 emits: ['foldChange'], //最重要
  setup(props, { emit }) {
    const isFold = ref(true)
    const handleFoldClick = () => {
      isFold.value = !isFold.value
      emit('foldChange', isFold.value)
    }

    return {
      isFold,
      handleFoldClick
    }
  }
  ...
  父组件用接受并保存值
  html
  ...
  <nav-header @foldChange="handleFoldChange" />
  ...
  js
  ....
  setup() {
    const isCollapse = ref(false)
    const handleFoldChange = (isFold: boolean) => {
      isCollapse.value = isFold
    }

    return {
      isCollapse,
      handleFoldChange
    }
  }
  ...