VUE弹出框(非同一文件下)及父子组件传值

最新推荐文章于 2024-08-29 10:04:34 发布

原创

最新推荐文章于 2024-08-29 10:04:34 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue.js中使用Element-UI实现非同一文件下的弹出框功能，并详细讲解了相关代码实现过程，同时讨论了父子组件间的值传递方法。

解决弹出框及相关问题
***1.官网element-ui 查询 ***

网址：https://element.eleme.cn/#/zh-CN/component/installation
使用快捷键：CTRL+F 搜索 Dialog对话框

2.下面实例代码＋说明
实现弹出框

代码讲解

需要使用弹出框的文件下
1.调用弹出框的初始位置，仅有一个点击事件就可以实现。
<el-button style="background-color: aqua" @click="dialogVisible = true">新增</el-button>

2.导入跳转弹出框组件
 import Edit from "@/views/workDir/everyDayNetBook/addOrUpadte/index"
 
3.在export default 下注册为组件
 components:{
   
   Edit}
 
 4.在 <template> 下开始传值调用, 此处传值可以查看《父组件传值相关知识》
 <edit :visible.sync="dialogVisible"></edit>

弹出框UI 另一个vue与上面不在同一文件下
1.设置UI
	<template>
	    <el-dialog
	            transition
	            :visible.sync="dialogVisible" // 传来的弹出框状态
	            :show-close="true" // x号
	            width="60%"
	            :close-on-click-modal="false" // 任意空白处关闭该弹出框
	            @open="getTableData" // 打开弹出框执行的操作
	            @close="close"> // 关闭执行什么操作，一般都是清空数据
	    </el-dialog>
	</template>
2.接收传来的值
	props:{
   
   
            // 是否显示
            visible: {
   
   
                type: Boolean,
                default: false
            }
        }
3. (计算属性)计算传来的值
	computed: {
   
    // 计算属性
            dialogVisible: {
   
     // 获取之后可以将弹出框回显到页面
                get: function () {
   
   
                    return this.visible
                },
                set: function (newValue) {
   
   
                    this.$emit('update:visible', newValue)
                }
            }
        }

源码a.VUE

<template>
    <div>
        <header-ui></header-ui>
        <el-container>
            <el-aside ><left-ui></left-ui></el-aside>
            <el-main  :style="pageHeight">
                <template>
                    <div style="margin-top: -12px;margin-left: 86%">
                            <el-button
                                    style="margin-top: -19px;background-color: aqua"
                                    icon="fa fa-filter"
                                    size="small"
                                    @click="showSearch = !showSearch"
                            >
                                {
   
   {
   
    showSearch ? "隐藏" : "查询" }}
                            </el-button>
                            <el-button style="background-color: aqua" @click="dialogVisible = true">新增</el-button>
                    </div>
                    <div style="margin-top:10px;">
                        <el-form v-if=