咱就不说那些理论性的 东西了 ,直接上代码直接用
这是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用户