vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
彈窗引用另一個(gè)頁(yè)面窗口
需求:在一個(gè)主頁(yè)面A.vue上點(diǎn)擊按鈕時(shí)彈出一個(gè)窗口,該窗口的定義在B.vue,比如修改,需要從A.vue傳參到B.vue,修改完成后,刷新A.vue. 實(shí)現(xiàn)
頁(yè)面定義,有2個(gè)文件,在index.vue上有個(gè)【修改】按鈕,點(diǎn)擊彈出testDialog.vue定義的窗口,如下

testDialog.vue
<template> ? <!-- 添加或修改業(yè)務(wù)對(duì)話框 --> ? <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" append-to-body> ? ? <el-form ref="bizform" :model="bizform" label-width="80px"> ? ? ? <el-form-item label="業(yè)務(wù)名稱" prop="bizName"> ? ? ? ? <el-input v-model="bizform.bizName" placeholder="請(qǐng)輸入業(yè)務(wù)名稱"/> ? ? ? </el-form-item> ? ? ? <el-form-item label="業(yè)務(wù)編碼" prop="bizCode"> ? ? ? ? <el-input v-model="bizform.bizCode" placeholder="請(qǐng)輸入編碼名稱"/> ? ? ? </el-form-item> ? ? </el-form> ? ? <div slot="footer" class="dialog-footer"> ? ? ? <el-button type="primary" @click="submitForm">確 定</el-button> ? ? ? <el-button @click="cancel">取 消</el-button> ? ? </div> ? </el-dialog> </template>
<script>
? ? import {getById, addBizDefine, updateBizDefine} from "@/api/funds/routecenter/bizdefine";
? ? export default {
? ? ? ? name: "testDialog",
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 彈出層標(biāo)題
? ? ? ? ? ? ? ? title: "",
? ? ? ? ? ? ? ? // 是否顯示彈出層
? ? ? ? ? ? ? ? open: false,
? ? ? ? ? ? ? ? // 表單參數(shù)
? ? ? ? ? ? ? ? bizform: {}
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ?? ?// 窗口初始化方法,nextTick方法可以添加邏輯,如打開窗口時(shí)查詢數(shù)據(jù)填充
? ? ? ? ? ? init(bizId) {
? ? ? ? ? ? ? ? this.open = true;
? ? ? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? ? ? getById(bizId).then(response => {
? ? ? ? ? ? ? ? ? ? ? ? this.bizform = response.data;
? ? ? ? ? ? ? ? ? ? ? ? this.open = true;
? ? ? ? ? ? ? ? ? ? ? ? this.title = "修改業(yè)務(wù)";
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? // 取消按鈕
? ? ? ? ? ? cancel() {
? ? ? ? ? ? ? ? this.open = false;
? ? ? ? ? ? ? ? this.reset();
? ? ? ? ? ? },
? ? ? ? ? ? /** 提交按鈕 */
? ? ? ? ? ? submitForm: function () {
? ? ? ? ? ? ? ? this.$refs["bizform"].validate(valid => {
? ? ? ? ? ? ? ? ? ? if (valid) {
? ? ? ? ? ? ? ? ? ? ? ? if (this.bizform.id != undefined) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? updateBizDefine(this.bizform).then(response => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (response.data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgSuccess("修改成功");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.open = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 調(diào)用主頁(yè)面的getList方法刷新主頁(yè)面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$parent.getList();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgError(response.resultMsg);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? addBizDefine(this.bizform).then(response => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (response.data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgSuccess("新增成功");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.open = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 調(diào)用主頁(yè)面的getList方法刷新主頁(yè)面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$parent.getList();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgError(response.resultMsg);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? };
</script>index.vue中定義一個(gè)button,其它代碼省略
<template> ?? ?<!-- 打開測(cè)試窗口按鈕 --> ?? ?<el-button ?? ? ? ? ? type="primary" ?? ? ? ? ? icon="el-icon-plus" ?? ? ? ? ? size="mini" ?? ? ? ? ? @click="handleDialog" ?? ?>測(cè)試彈窗 ?? ?</el-button> ?? ?<!-- 使用組件--> ?? ?<testDialog title="測(cè)試窗口" v-if="openDialog" ref="testDialog"/> </template>
<script>
?? ?// 引用組件
? ? import testDialog from "./testDialog";
? ? import {queryBizDefine} from "@/api/funds/routecenter/bizdefine";
? ? export default {
?? ? ? ?// 注冊(cè)組件
?? ? ? ?components: {testDialog},
?? ? ? ?data() {
?? ??? ? ? ?return {
?? ??? ? ? ? ? ?// 顯示窗口
?? ??? ? ? ? ? ?openDialog: false
?? ??? ? ? ?};
?? ? ? ?},
?? ? ? ?methods: {
?? ??? ? ? ?/** 查詢業(yè)務(wù)列表 */
?? ??? ? ? ?getList() {
?? ??? ? ? ? ? ?this.loading = true;
?? ??? ? ? ? ? ?queryBizDefine(this.queryParams).then(response => {
?? ??? ? ? ? ? ? ? ?this.bizList = response.data.rows;
?? ??? ? ? ? ? ? ? ?this.total = response.data.total;
?? ??? ? ? ? ? ? ? ?this.loading = false;
?? ??? ? ? ? ? ?});
?? ??? ? ? ?},
?? ??? ? ? ?// 按鈕方法
?? ??? ? ? ?handleDialog() {
?? ??? ??? ??? ?this.openDialog = true;
?? ??? ??? ??? ?this.$nextTick(() => {
?? ??? ??? ??? ? ? ?this.$refs.testDialog.init(2);
?? ??? ??? ??? ?});
?? ??? ??? ?}
?? ??? ?}
?? ?};
</script>測(cè)試效果,上圖是把id為2傳了進(jìn)來,在另一個(gè)頁(yè)面能查出來,并顯示

修改后能刷新主頁(yè)面


彈窗如何嵌入其它頁(yè)面
直接上代碼。
代碼使用的是Element-ui。
A頁(yè)面(父頁(yè)面)
將B頁(yè)面當(dāng)作組件引入。
import taskLogList from '../dialogPage/index.vue'
export default { ?
? components:{
? ? ? dialogPage
? ? },
...
}將組件引入放到HTML代碼中
?<dialogPage? ? ? v-if="formPageVisible"? ? ? ref="formPageRef"? ? ? :queryId="logDialog.queryId"> </dialogPage >
代碼說明
queryId:自定義的傳值參數(shù)。 目的是將值從父頁(yè)面?zhèn)鬟f到子頁(yè)面去。formPageVisible:顯示參數(shù)。
在調(diào)用當(dāng)前彈窗的方法里面進(jìn)行如下設(shè)置
methods:{
? ? ...
?
? ? /**
? ? * 彈窗方法
? ? */
? ? showLog(obj){
?
? ? ? ? //顯示
? ? ? ? this.formPageVisible = true;
?
? ? ? ? //賦值
? ? ? ? this.queryId= obj.queryId;
?
? ? ? ? //調(diào)用子頁(yè)面方法
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ??
? ? ? ? ? this.$refs.formPageRef.getlist();
? ? ? ? })
? ? ? }
}基本上A頁(yè)面已經(jīng)可以退休了。
下面B頁(yè)面開始上場(chǎng)。
B頁(yè)面(子頁(yè)面)
B頁(yè)面主要的工作是兩個(gè)。
1、獲取A頁(yè)面的傳值
2、方法的實(shí)現(xiàn)。
1、獲取A頁(yè)面的傳值
傳值的話,在Vue中。一般在props中進(jìn)行設(shè)置。
?export default {
? ? props: {
? ? ? queryId:{
? ? ? ? type: String,
? ? ? ? default: '',
? ? ? },
? ? },
?...在這個(gè)里面,queryId是前面?zhèn)鬟f過來的參數(shù)。
2、方法的實(shí)現(xiàn)
省略....
對(duì)了,記得把B頁(yè)面設(shè)置為dialog。否則彈窗的效果可能不能實(shí)現(xiàn)哦。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue讀取本地的excel文件并顯示在網(wǎng)頁(yè)上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁(yè)上方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-04-04
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí)
本文主要介紹了ElementUI級(jí)聯(lián)選擇器實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí),同一父級(jí)下的子節(jié)點(diǎn)單選,又可以選擇多個(gè)不同父級(jí)下的節(jié)點(diǎn),具有一定參考價(jià)值,感興趣的可以了解一下2023-10-10
wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作
這篇文章主要介紹了wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue的圖片需要用require的方式進(jìn)行引入問題
這篇文章主要介紹了vue的圖片需要用require的方式進(jìn)行引入問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式
這篇文章主要介紹了Vue3中注冊(cè)全局的組件,并在TS中添加全局組件提示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07

