Vue3父子组件传值

咱就不说那些理论性的 东西了 ，直接上代码直接用

        这是V3最新版本的写法 不需要return

        

    <template>
 <MapPopup @mapPopups="mapPopups" v-if="state.mapPopup" :list="list"/>
    </template>
    <script lang="ts" setup>
    import MapPopup from './mapPopup.vue'    
    import { reactive , ref } from 'vue'
    const state = reactive({
      mapPopup: false,
    })
    const list = ref([]) as any //这里是V-bind 绑定的数据
    const mapPopups = (e : boolean) =>{
      state.mapPopu = e
    } //这里是自定义事件
    </script>
//这是父组件 纯手码 写错单词勿喷 我是个高贵的VScode用户

<template>
  <div class="mapPopup">
    <header class="mapHeader" @click="mapPopupClose">
    <span>这是子组件</span>
    </header>
  </div>
<template>
<script lang="ts" setup>
    const props = defineProps({
        list: {
            type: Array,
            default: () => []
        }
    })
        //通过emit实现子向父传值
    const emit = defineEmits(['mapPopups']) // 注册mapPopups自定义事件
    const mapPopupClose = () =>{
    consle.log(props.list) //打印父传过来的值 []
    emit('mapPopups', false) //通过emit 通知父组件调用函数
    }
    
    

</script
  

 纯手码 写错单词勿喷 我是个高贵的VScode用户