在Vue3项目开发中，我们会将一个模块根据基础的功能拆分成很多个小组件，例如：弹窗、Form表单等，这样我们避免不了组件间的数据传递，这时就需要父子组件通信。

父传子

数据传递

将父组件数据传递给子组件，父组件示例代码如下：

<script setup>
import { ref } from 'vue'
import sonComVue from './components/son-com.vue'	// 引入子组件
const message = ref('你好，我是父组件传递的数据')		// 定义变量
setTimeout(() => { message.value = '数据改变了' }, 3000)  // 定时器修改数据
</script>

<template>
  <h2>父组件App</h2>
  <sonComVue :message="message" />		// 使用子组件并绑定message变量
</template>

在父组件中，我们通过引入使用子组件并通过message变量传递数据给子组件，子组件通过defineProps方法接收父组件传递过来的数据，子组件示例代码如下：

<script setup>
const props = defineProps({		//通过defineProps "编译器宏"接收子组件传递的数据
  message: String
})
</script>
<template>
    <h3>子组件Son</h3>
    <div>父组件传入的数据-{{ message }}</div>
</template>

这样我们就实现了父组件数据传递给子组件了。

方法传递

将父组件的方法传递给子组件需要使用@绑定事件，父组件示例代码如下：

<script setup>
import { ref } from 'vue'
import sonComVue from './components/son-com.vue' // 引入子组件
const sendMessage = () => {
  console.log('你好，我是子组件，调用父组件方法')
}
</script>

<template>
  <h2>父组件App</h2>
  <sonComVue @send-message="sendMessage" />		<!-- @绑定sendMessage方法给子组件 -->
</template>

在父组件中，我们通过@绑定方法给子组件，子组件通过defineEmits方法接收传递的方法，通过emit触发传递的方法，子组件示例代码如下：

<script setup>
const emit = defineEmits(['send-message'])		// 接收传递过来的方法
const sendMsg = () => {     
  emit('send-message')	// emit触发自定义事件并传递参数
}
</script>
<template>
  <button @click="sendMsg">sendMsg</button>
</template>

当我们点击button按钮时，控制台就会输出你好，我是子组件，调用父组件方法。

注意：defineEmits方法接收的参数为列表，这说明可以接收多个方法，我们可以通过emit方法传入方法名即可触发对应的方法。

子传父

默认情况下载<script. setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose指定哪些属性和方法允许访问，子组件示例代码如下：

<script setup>
const sendMsg = () => {
  console.log('我是子组件的方法')
}
const msg = '我是子组件数据'
defineExpose({ sendMsg, msg })		// 将sendMsg方法、msg变量供给外界使用
</script>

在父组件中，我们通过ref标识获取子组件的实例对象，示例代码如下：

<script setup>
import { ref } from 'vue'
import sonComVue from './components/son-com.vue' // 引入子组件
const sonCom = ref(null)		// 创建子组件实例对象
const sendSon = () => {
  sonCom.value.sendMsg()		// 调用子组件的方法
  console.log(sonCom.value.msg)		// 输出子组件的数据
}
</script>

<template>
  <h2>父组件App</h2>
  <sonComVue ref="sonCom" />		<!--ref标识获取子组件实例对象-->
  <button @click="sendSon">使用子组件方法</button>
</template>

通过子组件实例对象.value的方式获取子组件的方法或数据，这样就成功实现了子传父。

好了，Vue3系列——父子组件通信就学到这里了。

– END –