vue3-父子组件通讯

[ 原创 ] vue3-父子组件通讯

栏目：笔记作者：teemo 阅读：（5902）更新于：2023-05-17 09:59

在写后台页面的时候，一些简单的信息添加和修改我是直接弹窗实现，弹窗的时候有两种方式。

一种是直接在父页面写代码，这样不涉及到通讯，但是父页面会比较大，且无法复用。所以这里选择了第二种。

一种是在父页面加载子组件，进行通讯，这是这个笔记的来源。

通讯

首先需要知道的是 vue 中通讯函数中，父组件使用动态变量传递到子组件


x
<ChildDemo  :dialog-Show="dialogShow" />

当需要使用函数通讯时，使用 @ 传递


x
<ChildDemo  @close-dialog="closeDialog" />

子组件使用父组件传递参数：


x
<script>
export default defineComponent({
    //这种写法也可以，不过不推荐，还是建议定义类型
    // props: ["logId","dialogShow","dialogTitle"],
    props: {
        logId: Number,
        dialogShow: Boolean,
        dialogTitle: String
    },
    emits: ["closeDialog"],
    setup(props, {emit}) {})
})
</script>

如果使用语法糖 setup之后，使用的是 defineProps defineEmits这两个函数来替代。为了保持团队统一，我们没有使用语法糖。

需要注意一点就是当弹窗子组件做完事情之后，他自身的属性还是保留的。
举个例子：父组件是用户列表，子组件是新增用户。点击新增按钮，在子组件新增完用户完，再点新增按钮进来的属性还是上次提交的信息，所以我们需要给子组件添加属性 ：key ，当变更 key 的值时，子组件会重新生成。

例子：


xxxxxxxxxx
<!-- FatherDemo.vue -->
<template>
    <div style="border: 1px solid #0960bd;width: 300px;">
        <h2>父组件内容</h2>
        dialogShow : {{ dialogShow }}
        <br/>
        dialogTitle : {{ dialogTitle }}
        <br/>
        logId:{{ logId }}
        <br/>
        <button @click="changeDialogShow">修改 dialogShow</button>
        <button @click="changeLogId">修改 logId</button>
    </div>
    <div style="border: 1px solid #1B8F7A;width: 300px;">
        <!--
        这里设置了3个属性和一个函数，定义参数的时候官方建议是 中横线转换成小驼峰，如 a-b="c" ，子组件接受就是 aB
        dialogShow 判断子组件的弹窗是否显示
        dialogTitle 设置子组件弹窗的标题
        logId 设置关联参数
        close-dialog 函数，子组件函数传递值到父组件
        -->
        <ChildDemo
                :dialog-Show="dialogShow"
                :dialog-title="dialogTitle"
                :log-id="logId"
                :key="componentKey"
                @close-dialog="closeDialog"
        />
    </div>

</template>
<script>
// 为了方便统一风格 我们没有使用 setup 语法糖，所以使用方式略微不一样
import {defineComponent, ref} from 'vue'
import ChildDemo from "@/components/test/ChildDemo.vue";

export default defineComponent({
    // 启用子组件
    components: {
        ChildDemo,
    },

    setup() {
        const dialogShow = ref(false)
        const dialogTitle = ref("hello vue3")
        const logId = ref(0)
        const componentKey = ref(0)

        const changeLogId = () => {
            logId.value++
        }

        const closeDialog = (result) => {
            console.log("接受到子组件信息:" + result)
            dialogShow.value = false
            dialogTitle.value = result
            console.log("接受到子组件信息后修改dialogShow的值，关闭弹窗,如果子组件是表单，还需要重置下")
            componentKey.value++
        }

        const changeDialogShow = () => {
            dialogShow.value = !dialogShow.value
        }

        return {
            dialogShow, dialogTitle, logId, componentKey,
            closeDialog, changeLogId, changeDialogShow
        }
    },
})
</script>

子组件


x
<!-- ChildDemo.vue -->
<template>
  <h2>子组件内容</h2>
  dialogShow : {{ dialogShow }}
    <br/>
  dialogTitle : {{ dialogTitle }}
    <br/>
  logId:{{ logId }}
    <br/>
    <button @click="handle">发送</button>
</template>
<script>
import {defineComponent, onMounted} from 'vue'

export default defineComponent({
    //这种写法也可以，不过不推荐，还是建议定义类型
    // props: ["logId","dialogShow","dialogTitle"],
    props: {
        logId: Number,
        dialogShow: Boolean,
        dialogTitle: String
    },
    emits: ["closeDialog"],
    setup(props, {emit}) {

        const getDetail = () => {
            console.log("获取详情")
        }

        const handle = () => {
            console.log("给父组件通讯,发送:hello,FatherDemo")
            emit("closeDialog", "hello,FatherDemo")
        }

        onMounted(() => {
            if (props.logId) {
                getDetail()
            }
        })

        return {
            handle
        }
    },
})
</script>