【Vue3 第十四章】父子组件通信-阿里云开发者社区

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

2023-06-29 138

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【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) return
        emits('formSubmit', formEle)
    }
    const resetForm = (formEle) => {
        if (!formEle) return
        formEle.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 = 1
    const 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>