数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、概述

在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  }) " _ue_custom_node_="true">  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}` : "" }) " _ue_custom_node_="true">

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

三、瀑布流案例

四、子组件向父组件传值

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

template 模板中直接使用 $emit() 触发这个事件，script 模块中通过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','返回操作传递的数据....')  } " _ue_custom_node_="true">    ...省略表单控件渲染代码     提交 重置 返回

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

 import OgForm from "@c/ogform/Ogform.vue"   const submit = (formEle) => {  formEle.validate((valid, fields) => {  ....省略代码  })  }   const back = (arg) => {  ....省略代码  } " _ue_custom_node_="true">

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

用了

父组件 ref 模板引用：

 import { ref, onMounted } from 'vue'  import Child from './Child.vue'   const child = ref(null)   onMounted(() => {  console.log(child.value)  }) " _ue_custom_node_="true">