Vue3的传值：父向子，子向父_vue3 子组件接收父组件值 v-if-优快云博客

本文详细介绍了Vue.js中父子组件间的通信方式。父组件通过`v-bind`属性向子组件传递`menuOpen`布尔值，而子组件通过`defineProps`接收并使用该值。同时，子组件可以定义`emits`来触发事件，将值回传给父组件，父组件通过监听相应事件来接收并更新状态。这一过程对于构建交互丰富的Vue应用至关重要。

父组件向子组件传递值

父组件通过:冒号向子组件传递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>