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>
复制代码

 

posted @   微笑掩埋了眼泪的骄傲  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示