前端学习：vue3.0父组件与子组件的数据交互

- 日理万妓 2022-10-05 15:42 248阅读 0赞

# vue3.0父组件与子组件的数据交互 #

在 vue2.0 中，我们用 props 来实现父组件向子组件传值，用 this.$emit() 来实现子组件向父组件传值，从而达到父组件与子组件的数据交互。  
在 vue3.0 中，我们也是通过 props 与 emit 来实现父组件与子组件的数据交互，但是写法上有较大的差异，下面将用实例来展示他的用法，实例中的组件源于 element-ui，点击这里[《vue3.0父子组件数据交互》][vue3.0]可以下载所有源码。  
这是该实例的效果图：  
![在这里插入图片描述][20210611144631153.gif]  
以下为实例的核心源码：

> index.vue

<template>
        <div>
            <el-button type="danger" @click="isShow = true">弹出层</el-button>
            <popup-layer :show="isShow" @closeDialog="close" />
        </div>
    </template>
    <script> import { ref } from "vue"; import PopupLayer from "./component/popupLayer"; export default { components: { PopupLayer }, name: "Index", setup(props, { }) { const isShow = ref(false); const close = ((val) => { isShow.value = val; }); return { isShow, close } } } </script>
    <style> </style>

> popupLayer.vue

<template>
        <div>
            <el-dialog title="温馨提示" v-model="isShow" @close="closeDialog">
                弹出层已打开！
                <template #footer>
                    <span class="dialog-footer">
                    <el-button @click="isShow = false">取 消</el-button>
                    <el-button type="primary" @click="isShow = false">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </template>
    <script> import { ref, watch } from "vue"; export default { name: "PopupLayer", props: { show: { //父组件向子组件传参 type: Boolean, default: false } }, setup(props, { emit }) { const isShow = ref(false); const closeDialog = (() => { emit("closeDialog"， false); //子组件向父组件返回值 }); watch(() => props.show, (newS, oldS) => { isShow.value = newS; }); return { isShow, closeDialog } } } </script>

感谢您的耐心观看！  
学习分享，一起成长！以上为小编的学习分享，若存在不当之处，请批评指正！

[vue3.0]: https://download.csdn.net/download/qq_36553707/19569955
[20210611144631153.gif]: /images/20221005/9eb11bd994d644289d80fc3d574a5dcd.png