vue3 组合式api ＜script setup＞中子组件之间传值逻辑

芒果芒果丶

已于 2023-05-24 08:31:54 修改

阅读量243

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-04-07 15:49:41 首次发布

本文链接：https://blog.youkuaiyun.com/mangobot/article/details/130013838

版权

文章描述了在Vue中如何进行组件间的通信。子组件1使用`emit`触发自定义事件`clickMap`，将值传递给父组件。父组件接收到值后，通过自定义函数更新状态，并将新的值通过props传递给子组件2，实现数据流动。

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

基本逻辑

子组件1通过emit()触发自定义事件，把值传给父组件
父组件通过自定义事件接值
父组件通过自定义的函数把值传给子组件2

//子组件1
<script setup>
    const emit = defineEmits(['clickMap'])//引入自定义事件

    emit('clickMap', response.data)
</script>

//父组件 引入子组件1，通过自定义事件clickMap接受子组件1传的值
<WqMap @clickMap="showData" />

//父组件引入子组件2，自定义buy_rank属性
<BuyNumber :buy_rank="data.buy_rank" />


<script setup>

import { reactive } from "vue";

const data = reactive({
     buy_rank: []
})


const showData = (params) =>{
     data.buy_rank = params.buy_rank;
}
</script>

//子组件2  通过props获取父组件传递的值

:data="props.buy_rank"

<script setup>
    // 通过 props 获取父组件的值
    const props = defineProps({
        buy_rank: []
    })
</script>