Vue3的传值：父向子，子向父

父组件向子组件传递值

父组件通过:冒号向子组件传递menuOpen

<template>
	<Process :menuOpen="menuOpen" />
</template>
<script setup lang="ts">
const menuOpen = ref<boolean>(false);
</script>

子组件通过defineProps接收父组件传来的值

<template>
<span v-if="menuOpen">啥啥啥</span>
</template>
<script setup lang="ts">
//从父组件传来的值
defineProps<{ menuOpen: boolean }>();
</script>

如果要在方法中使用从父组件传来的值，那么就要定义一个props

//从父组件传来的值
<script setup lang="ts">
	const props = defineProps<{
	  menuOpen: boolean；
	}>();
	const { menuOpen } = toRefs(props);
</script>

子组件向父组件传递值

子组件通过定义emits向父组件传递

<template>
	<div @click="handleClick">啥啥啥</div>
</template>
<script setup lang="ts">
//向父组件传递name值
const emits=defineEmits(['getNames']);
const handleClick=()=>{
  emits('getNames',item.name)
}
</script>

父组件接收子组件传来的值

<template>
	<Process @getNames="getNames" />
</template>
<script setup lang="ts">
const names = ref<string>('');
//子组件传来的事件
const getNames=(name:string)=>{
  names.value=name
}
</script>