vue3子传父

←_→

于 2023-06-17 16:49:58 发布

阅读量77

点赞数

分类专栏： vue3 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/qq_43319351/article/details/131262179

版权

vue3 专栏收录该内容

2 篇文章

订阅专栏

文章展示了一个Vue应用中，子组件通过`emit`触发事件并传递数据给父组件的例子。父组件监听`change-money`事件，子组件在按钮点击时调用`changeParent`方法，传递值为2000。

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

1.父组件

<template>
  <div>

    <h1>父组件</h1>
    <son @change-money="change"></son>
  </div>
</template>

<script setup lang='ts'>
import son from "../son.vue";


const change = (data) => {
  console.log('子组件传来的值', data);

}

</script>

<style lang='scss' scoped></style>

2.子组件

<template>
  <div>
  </div>
  <button @click="changeParent">传值</button>
</template>

<script setup lang='ts'>
const emit = defineEmits(['change-money'])

const changeParent = () => {
  emit('change-money', 2000)
}
</script>

<style lang='scss' scoped></style>