【Vue3 第十四章】父子组件通信 |
您所在的位置：网站首页 › vue两个子组件怎么通信 › 【Vue3 第十四章】父子组件通信 |
【Vue3 第十四章】父子组件通信
|
一、概述
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。 Vue 开发中常见的三种数据传递情况：父传子、子传父、非父子组件间值的传递
父组件先通过 v-bind 绑定一个数据，然后子组件通过 defineProps宏 接收传递过来的值。如下代码： 父组件 App.vue 中传递 type 和 loading 两个属性值给子组件 Ogbutton import OgButton from "@c/ogbutton/Ogbutton.vue" import { reactive } from "vue" let state = reactive({ loading: false }) Warning Success子组件 OgButton.vue 中通过 **defineProps宏 （宏无需引入，直接使用即可）**接收传递过来的值 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}` : "" })注：vue 设计是单向数据流，数据的流动方向只能是自上往下。为了防止从子组件意外变更父组件的状态，导致应用的数据流向难以理解，规定子组件中不能修改父组件中的数据。 三、子组件向父组件传值子组件通过 defineEmits宏 派发一个事件，并返回一个函数 template 模板中直接使用 $emit() 触发这个事件，script 模块中通过defineEmits宏返回的函数触发这个事件 两个触发事件的函数参数： 第一个参数为自定义的事件名称第二个参数为需要传递的数据 // 通过 defineEmits 混合宏显式的声明组件要触发的事件 const emits = defineEmits(['formSubmit', 'formBack']) // 提交、重置、返回上一页按钮 const submitForm = (formEle) => { console.log(formEle) if (!formEle) return emits('formSubmit', formEle) } const resetForm = (formEle) => { if (!formEle) return formEle.resetFields() } const backFn = () => { // history.back() emits('formBack','返回操作传递的数据....') } ...省略表单控件渲染代码 提交 重置 返回父组件监听子组件中定义的事件，并接收传递过来的数据 import OgForm from "@c/ogform/Ogform.vue" const submit = (formEle) => { formEle.validate((valid, fields) => { ....省略代码 }) } // 返回上一页 const back = (arg) => { ....省略代码 } 四、子组件暴露内部属性给父组件用了 的组件是默认私有的：一个父组件无法访问到一个使用了 的子组件中的任何东西，除非子组件在其中通过 defineExpose 编译器宏显式暴露。 Child.vue 子组件通过 defineExpose宏 暴露私有属性： import { ref } from 'vue' const a = 1 const b = ref(2) // 像 defineExpose 这样的编译器宏不需要导入 defineExpose({ a, b })父组件 ref 模板引用： import { ref, onMounted } from 'vue' import Child from './Child.vue' const child = ref(null) onMounted(() => { // child.value 是 组件的实例 console.log(child.value) }) |
【本文地址】