<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-button @click='handleOpenDialog'>打开Dialog弹框</el-button>
<el-dialog title='外部表格弹窗' center :visible.sync='outVisible' :before-close='outClose'>
<el-table :data='gridData'>
<el-table-column prop='date' label='日期'></el-table-column>
<el-table-column prop='name' label='姓名'></el-table-column>
<el-table-column prop='address' label='地址'></el-table-column>
<el-table-column label='操作'>
<template slot-scope='scope'>
<el-button type='warning' size='mini' @click='handleEdit(scope.row)'>修改</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title='内部表单弹窗' center :visible.sync='innerVisible' :before-close='outClose' append-to-body>
<el-form :model='formData' label-width='80px'>
<el-form-item label='日期'>
<el-input v-model='formData.date'></el-input>
</el-form-item>
<el-form-item label='姓名'>
<el-input v-model='formData.name'></el-input>
</el-form-item>
<el-form-item label='地址'>
<el-input v-model='formData.address'></el-input>
</el-form-item>
</el-form>
<span slot='footer'>
<el-button @click='innerVisible=false'>返回</el-button>
</span>
</el-dialog>
<span slot='footer'>
<el-button @click='outVisible=false'>返回</el-button>
</span>
</el-dialog>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data() {
return {
outVisible: false,
innerVisible: false,
formData: { date: '', name: '', address: '' },
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
}
},
methods: {
handleOpenDialog() {
this.outVisible = true
},
outClose(done) {
this.$confirm('确认关闭', '提示框').then(() => {
done()
}).catch(() => {
})
},
handleEdit(row) {
this.formData = row
this.innerVisible = true
}
}
})
</script>
分享到:
相关推荐
Vue 组件间传值及事件回调
vue 不同组件传值,简单,就是记不住,记得判断
vue3父子组件传值,vue3组件传值,父子兄弟组件传值,props、emit、eventbus
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 <!--子组件...
基于Vue Dialog实现可以移动窗口
写了几个小demo,简单描述了vue中父组件传值子组件、子组件传值父组件、父组件调用子组件的方法或变量。
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
详解从vue的组件传值着手观察者模式 目录 观察者模式Vue传值第一步,我们先在main.js中注册一下bus第二步,我们开始发送消息第三步,在组件三中接收消息vue的机制观察者模式存在的意义 观察者模式 Vue传值 第...
vue2 父子组件传值案例 父传子 子传父 下载完成先在本文件夹下命令行终端npm i 初始化项目 然后npm serve启动项目
主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下
在父组件A 里 引入了子组件B , 但同时B组件又是子组件C的父组件,C又是子组件D的父组件 那么, A组件分别向B ,C ,D传值是如何实现的? D组件又是如何分别向C B A 传值的
vue3父子组件传值
主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
采用广播方式对非父子界进行传值,需要依赖的vueEvent.js
主要介绍了vue父子模板传值问题解决方法,结合案例形式分析了vue.js父子模板传值问题相关实现方法与具体操作步骤,需要的朋友可以参考下
包含vuex,Props(父组件向子组件传值 传递一层方便 ) Vue子组件向父组件传值(this.$emit()方法),父组件向子组件传递(不止一层 provide,inject)
在用 Vue 的父子组件传值时遇到一个冷门的问题,子组件改变值后父组件的值也随之改变了,特此记录下原因和解决方式。 再系统梳理下 JavaScript 的深拷贝与浅拷贝相关知识点。 1. 问题描述 父组件传值给子组件,子...
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧