vue页面父子传参&引进模态框组件-20

一：新建需要引进的模态框dialog

1.新建html页面

<style>
    #userListDetailDialog .footerButton {
        display: flex;
        justify-content: center;
    }
</style>
<script type="text/x-template" id="user-list-detail">
    <el-dialog id="userListDetailDialog" :visible.sync="show" :close-on-click-modal="false" v-on:close="closeDialog" title="引进dialog的标题" width="1300px">
        <el-card class="box-card">
           <div></div>
        </el-card>
        <div class="gap-line2"></div>
        <div class="footerButton">
            <el-button  size="mini" type="info" v-on:click="closeDialog" icon="el-icon-back">关闭</el-button>
        </div>
    </el-dialog>
</script>
<script src="${ctxPath}/static/modular/ndms4/need/userList.js?v=${webappVersion}"></script>

• :visible.sync=“show”：表示当前模态框是否显示
• v-on:close=“closeDialog”：表示当前模态框的关闭方法
• <script src=>：表示引入html对应的js文件
• 在script标签中id=“user-list-detail”：user-list-detail的值与js当中的template的值保持一致
  

2.新建js页面

Vue.component("user-list-dialog", {
    template: "#user-list-detail",
    data() {
        return {};
    },
    watch: {
        show(show) {
            let self = this;
            if (show) {
                // 数据初始化
                self.init();
            }
        },
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        param: {
            type: Object,
            default() {
                return [];
            }
        }
    },
    methods: {
        /**
         * 初始化页面
         */
        init:function(){
            //查询列表数据
            self.search();
        },
        /**
         * 查询人员清单数据
         */
        search() {
        },
        /**
         * 关闭
         */
        closeDialog() {
            let self = this;
            self.$emit('update:show', false);
        },
    }
});

• user-list-dialog：与引入当前组件的标签保持一致。
  例：<*user-list-dialog></*user-list-dialog>
• template: “#user-list-detail”：其中#user-list-detail与dialog中的组件id保持一致。
• watch事件用来监听show的属性，当传过来的show等于true时，初始化当前引入的组件。
• prop属性用来接收参数
  1）show：类型时boolean类型，默认值是false，不显示
  2）param：类型时object类型，表示从父页面传递过来的参数。
• closeDialog表示关闭当前dialog组件,self.$emit(‘update:show’, false);
  1）emit表示子页面向父页面传递参数false。
  2）父页面获取方式update:show

二：引入当前dialog

1.在父页面的html中引入当前dialog

@layout("/common/_container_vue_ele.html"){
@layout("/ndms4/need/userList.html"){
@}
<style>
</style>
<link href="${ctxPath}/static/css/ndms4/table-style.css?v=${webappVersion}" rel="stylesheet">
<div id="app" v-cloak>
    <el-card class="box-card">
       <div></div>
    </el-card>
    <!--人员清单dialog-->
    <user-list-dialog :show.sync="userListDialog.show" :param="userListDialog.param" v-on:search="search"></user-list-dialog>
</div>
<script src="${ctxPath}/static/modular/ndms4/need/list.js?v=${webappVersion}" type="module"></script>
@}

• layout(“/ndms4/need/userList.html”)：表示当前dialog模态框所在的路径
• user-list-dialog就表示当前引入的子组件
• :show.sync：是否显示
• :param：传递的参数

2.引入父组件js

import {userListDialog} from '../../ndms4/medium/user_list_dialog_medium.js'
new Vue({
    el: '#app',
    data() {
        return {
            // 引入需求信息模态框模块参数与方法
            userListDialog:userListDialog,  
        };
    },
    methods: {
        /**
         * 人员清单
         */
        userList:function() {
            let self = this;
            if (self.selectedRow) {
                let param = {
                    needId:self.currentRowId,
                }
                userListDialog.openUserListDialog(param);
            } else {
                self.$message.info("请先选中表格中的某一记录！");
                return;
            }
        },

    }
});

• import {userListDialog} from ‘…/…/ndms4/medium/user_list_dialog_medium.js’：引入一个js文件用来传递参数。
• userListDialog:userListDialog, ：将当前文件注册到容器中。
• userListDialog.openUserListDialog(param)：调用userListDialog组件中openUserListDialog方法，用来向引入的js文件传递参数。

3.新建user_list_dialog_medium.js页面，此页面就是为了接收从父组件往子组件传递的参数。

export const userListDialog = new Vue({
    data() {
        return {
            show: false,
            // 打开导入文件模态框需要传递的参数集合
            param: {
                needId:'',
                recruitPlanDate:'',
            }
        };
    },
    methods: {
        openUserListDialog(param) {
            let self = this;
            self.show = true;
            self.param = param;
        }
    }
});

• userListDialog与引入的组件名保持一致。
  
• return中封装了show和param属性
• openUserListDialog方法用来传递参数
• 在父组件引入的模态框中，通过show和param参数控制引入模态框的显隐。

<!--人员清单dialog-->
    <user-list-dialog :show.sync="userListDialog.show" :param="userListDialog.param" v-on:search="search"></user-list-dialog>