【Vue3 第十四章】父子组件通信

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、概述

在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。

Vue 开发中常见的三种数据传递情况：父传子、子传父、非父子组件间值的传递

二、父组件向子组件传值

父组件先通过 v-bind 绑定一个数据，然后子组件通过 defineProps宏 接收传递过来的值。如下代码：

父组件 App.vue 中传递 type 和 loading 两个属性值给子组件 Ogbutton

<script setup>import OgButton from "@c/ogbutton/Ogbutton.vue"import { reactive } from "vue"let state = reactive({loading: false})
</script><template><og-button type="warning" :loading="state.loading">Warning</og-button><og-button :type="'success'">Success</og-button>
</template>

子组件 OgButton.vue 中通过 **defineProps宏（宏无需引入，直接使用即可）**接收传递过来的值

<script setup>
import { computed, toRefs } from "vue"
const props = defineProps({type: {type: String,default: "default"},loading: {type: Boolean,default: false}
})
const { type,loading } = toRefs(props);
const btnType = computed(() => {return type.value ? `btn-${type.value}` : ""
})
</script>
<template><button class="btn" :class="btnType"><i class="iconfont icon-loading" v-if="loading" style="margin-right:6px"></i></button>
</template>

注：vue 设计是单向数据流，数据的流动方向只能是自上往下。为了防止从子组件意外变更父组件的状态，导致应用的数据流向难以理解，规定子组件中不能修改父组件中的数据。

三、瀑布流案例

四、子组件向父组件传值

子组件通过 defineEmits宏 派发一个事件，并返回一个函数

template 模板中直接使用 $emit() 触发这个事件，script 模块中通过defineEmits宏返回的函数触发这个事件

两个触发事件的函数参数：

第一个参数为自定义的事件名称
第二个参数为需要传递的数据

<script setup>const emits = defineEmits(['formSubmit', 'formBack'])const submitForm = (formEle) => {console.log(formEle)if (!formEle) returnemits('formSubmit', formEle)}const resetForm = (formEle) => {if (!formEle) returnformEle.resetFields()}const backFn = () => {// history.back()emits('formBack','返回操作传递的数据....')}
</script>
<template><div><el-form ref="formRef" scroll-to-error><el-form-item>...省略表单控件渲染代码</el-form-item><el-form-item class="btns"><el-button type="primary" @click="submitForm(formRef)">提交</el-button><el-button type="warning" @click="resetForm(formRef)">重置</el-button><el-button type="danger" @click="backFn">返回</el-button></el-form-item></el-form></div>
</template>

父组件监听子组件中定义的事件，并接收传递过来的数据

<script setup>import OgForm from "@c/ogform/Ogform.vue"const submit = (formEle) => {formEle.validate((valid, fields) => {....省略代码})}const back = (arg) => {....省略代码}
</script>
<template><div><og-form  @form-submit="submit" @form-back="back"></og-form></div>
</template>

五、子组件暴露内部属性给父组件

用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 编译器宏显式暴露。

Child.vue 子组件通过 defineExpose宏 暴露私有属性：

<script setup>import { ref } from 'vue'const a = 1const b = ref(2)defineExpose({a,b})
</script>

父组件 ref 模板引用：

<script setup>import { ref, onMounted } from 'vue'import Child from './Child.vue'const child = ref(null)onMounted(() => {console.log(child.value)})
</script><template><Child ref="child" />
</template>