vue3 兄弟组件传参

vue3  

兄弟组件传参

A 组件

<template>  

<button @click="handleClick">点击切换状态</button>

</template>

<script setup>

import { defineEmits } from 'vue'

const emits = defineEmits<{   (e: 'on-click', flag: boolean): void }>()

const handleClick = () => {   emits('on-click', true) }

</script>

B组件

<template>  

<div v-if="flag">    

<p>状态为真！</p>  

</div>

</template>

<script setup>

const props = defineProps<{   flag: boolean }>()

</script>

中间组件

<template>

    <div>

        <A @on-click="getFalg"></A>

        <B :flag="Flag"></B>

    </div>

</template>

<script setup>

import A from './components/A.vue'

import B from './components/B.vue'

import { ref } from 'vue'

let Flag = ref<boolean>(false)

const getFalg = (flag: boolean) => {

   Flag.value = flag;

}

</script>