vue 父子组件传值
先说问题,在vue组件haul开发中,遇到了父组件往子组件传值的问题,父组件点击,子页面dialog不展示,注:这个问题浪费了我很长还见,网上找了一堆答非所问的答案都不行,记录一下
父
<template> <v-myDialog :dialog_format= "exampleDialogFormat" :data_format= "exampleDataFormat"/> </template> <script> import myDialog from "./myDialog" export default { name: "faultRecord", methods: { click_showExample(eType) { this.exampleDialogFormat.sync = true this.exampleDialogFormat.title = '查看示例' this.exampleDataFormat.exampleType = eType } } } </script>
子
<template> <div class="filter-container"> <el-dialog :title="title" :visible.sync="sync" width="85%" height="100%" > <div > </div> </el-dialog> </div> </template> <script> export default ({ name: "myDialog", props: { dialog_format: Object, data_formate: Object, }, watch: { 'dialog_format': function(val) { console.log(val) this.sync = val.sync; this.title = val.title; }, 'data_formate': function(val) { console.log(val) this.exampleType = val.exampleType }, }, data() { return { sync: false, title: null, exampleType: 1, } }, methods: { } }) </script>
原因
经过观察,父组件数据已经传递过去了,子组件无法通过watch监听到数据变化;因为数据未格式化
解决方案
父组件传递数据做格式化
<template> <v-myDialog :dialog_format= "exampleDialogFormat" :data_format= "exampleDataFormat"/> </template> <script> import myDialog from "./myDialog" export default { name: "faultRecord", methods: { click_showExample(eType) { this.exampleDialogFormat.sync = true this.exampleDialogFormat.title = '查看示例'
this.exampleDialogFormat = JSON.parse(JSON.stringify(this.exampleDialogFormat))
this.exampleDataFormat.exampleType = eType
this.exampleDataFormat = JSON.parse(JSON.stringify(this.exampleDataFormat))
} } } </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」