爬坑日记--------vue之弹出框传值问题
来源:互联网 发布:mysql 自动记录时间 编辑:程序博客网 时间:2024/06/06 14:18
在一个vue页面,进入另一个弹出框定义的vue(传入dialogStatus值)时,我遇到第一次进入弹出框页面dialogStatus值为空,第二次进入时值传过去了。
代码:
vue页面:
<el-dialog :title="textMap[dialogStatus]" size="large" :visible.sync="dialogFormVisible"> <modify @closeStationDialog="closeStationDialog" :dialogStatus="dialogStatus" ref="modify"></modify></el-dialog>
export default { components: { 'modify': () => import('./components/modify') }, methods: { handleAdd(){ this.dialogStatus = 'create'; this.dialogFormVisible = true; console.log(this.$refs.modify); if (this.$refs.modify !== undefined) { this.$refs.modify.dialogStatus = this.dialogStatus; } } }}modify页面(弹出框页面):
<div style="text-align: center; margin-bottom: 1rem;"> <el-button @click="cancel('form')">取 消</el-button> <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button> <el-button v-else type="primary" @click="update('form')">确 定</el-button></div>
export default { data(){ return{ dialogStatus: '' } }}
解决办法:将 dialogStatus(需要传递的值)定义在 props 里。
export default { props: { dialogStatus: { default: '1' } }}
来自vue.js官网的介绍:vue.js
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
阅读全文
0 0
- 爬坑日记--------vue之弹出框传值问题
- 爬坑日记--------vue之页面加载问题
- 爬坑日记--------vue修改启动端口号
- 爬坑日记--------vue如何与后端进行交互
- 爬坑日记--------vue的权限控制(vuex)
- Vue爬坑之路
- 项目日记之ORACLE问题
- vue实力采坑之url变化问题
- Windows 填坑日记之Windows 8 虚拟键盘问题
- UE4填坑日记之-生成.sln文件的问题
- 详解Vue爬坑之vuex初识
- vue+vue-router+vue-resource踩坑之路由不起作用
- vue 左侧菜单弹出
- vue-elementUI 弹出框
- Vue 之 vue-router 路由嵌套不显示问题
- 弹出框传值问题
- vue之页面缓存问题(基于2.0)
- VUE开始之路的问题记录
- python中使用xlrd、xlwt操作excel表格详解
- 移动端rem适配(手淘flexible方案)
- iOS11,Xcode 9.0 报错,Safe Area Layout Guide Before iOS 9.0
- jenkins 视图
- 初识react-native Featch和AsyncStorage
- 爬坑日记--------vue之弹出框传值问题
- VC++文件操作之最全篇
- vue.js中的列表渲染(循环渲染)(v-for)
- Jquery遍历
- cmake 配置交叉编译工作记录
- List自定义排序根据Collections.sort重载方法来实现
- git基本操作(一)
- 第十一周 项目4(1)
- POJ-2367 Genealogical tree (拓扑排序模板)