主要是在界面上，如果點擊個彈窗，再彈窗中，還需要彈出一個框，進行輸入查詢。目前此筆記就記錄了這個！

程序運行截圖如下：

點擊彈窗：

點擊查詢,第二層窗口彈出，輸入數據：

點擊確定并退出，即可：

程序結構如下：

源碼如下：

Dialog.vue

<template><div><el-button type="text" @click="outerVisible = true">點擊打開外層 Dialog</el-button><el-dialog title="外層 Dialog" :visible.sync="outerVisible"><OutDialog :openInDialogFunc="openInDialog" :InDlgValue="inputValue"></OutDialog><el-dialogwidth="50%"title="內層 Dialog":visible.sync="innerVisible"append-to-body><InDialog :closeInDialogFunc="closeInDialog" @inputDlgValue="getInDialogValue"></InDialog></el-dialog><div slot="footer" class="dialog-footer"><el-button @click="outerVisible = false">取 消</el-button></div></el-dialog></div> </template><script>import OutDialog from './OutDialog'import InDialog from './InDialog'export default {components:{OutDialog,InDialog},methods: {getInDialogValue(val){//子傳父獲取值this.inputValue = val;console.log("子傳父：" + this.inputValue)},openInDialog(){this.innerVisible = true},closeInDialog(){this.innerVisible = false}},data() {return {outerVisible: false,innerVisible: false,inputValue : ""};}} </script>

HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><Dialog></Dialog></div> </template><script>import Dialog from './Dialog' export default {components:{Dialog},name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 {font-weight: normal; } ul {list-style-type: none;padding: 0; } li {display: inline-block;margin: 0 10px; } a {color: #42b983; } </style>

InDialog.vue

<template><div><el-input v-model="input" placeholder="請輸入內容"></el-input><br/><br/><el-row><el-button type="primary" @click="onSubmit">確定并退出</el-button></el-row></div> </template><script>export default {props:{closeInDialogFunc: {type: Function,default: null}},data() {return {input: ''}},methods: {onSubmit() {if (this.closeInDialogFunc){this.$emit("inputDlgValue", this.input)this.closeInDialogFunc()}}}} </script>

OutDialog.vue

<template><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="輸入數據"><el-input v-model="formInline.user" placeholder="輸入數據"></el-input></el-form-item><el-form-item label="選擇數據"><el-input v-model="InDlgValue" placeholder="選擇數據"></el-input></el-form-item><br/><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form> </template><script>export default {props: {openInDialogFunc: {type: Function,default: null},InDlgValue:{type: String,default: null}},data() {return {formInline: {user: '',region: ''}}},methods: {onSubmit() {if(this.openInDialogFunc)this.openInDialogFunc()}}} </script><style scoped></style>

main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = falseVue.use(ElementUI);/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })

?

總結

以上是生活随笔為你收集整理的前端工作笔记-element ui弹窗嵌套并获取输入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。