hellonewyear 2022-07-03 03:42 采纳率: 100%
浏览 176
已结题

vue 监听 props 传object 类型数据不更新显示。

组件A:

<template>
<Shusan :init="ceshi" :age="age" />
<button @click="change" >更新数据</button>
</template>

<script setup>
import { ref ,reactive} from 'vue'
let ceshi=ref({"azu":[1,2,3,4,5],"bzu":[11,12,13,14,15],"czu":[21,22,23,24,25]})
console.log(ceshi);
//这里打印的是Object { __v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy }
//console.log(ceshi._rawValue.bzu);可以输出数组:Array(5) [ 11, 12, 13, 14, 15 ]

let change=()=>{
   ceshi={"azu":[11,12,13,14,15],"bzu":[111,112,113,114,115],"czu":[121,122,123,124,125]}
   console.log(ceshi.azu);
   
   age.value=456    
}
</script>
组件B:

<template>
    <div>{{num}}</div>
    <div>{{num1}}</div>
    <div>{{num2}}</div>
    
    <div>{{ageg}}</div>

    <div>{{dex}}</div>    
</template>


<script>

import { ref ,watch,watchEffect,onUpdated,toRefs,reactive} from 'vue'

export default {
    props:{
        init:{type:Object},
      
      
         age: {type:Number
         },                   
    },

    setup(props) {

        let dex=props.init
        let num=props.init.azu
        let num1=props.init.bzu
        let num2=props.init.czu

       let ageg=ref(props.age)
       
//单一的数据类型,如这个age数据是可以实时更新展示的。
       watch(()=>props.age,(n)=>{
        console.log(n);
           ageg.value=n
})


//init数组Object,这里的监听试了很多种方式都无法正常显示,包括添加默认值或者不添加都一样无法更新,只能正常显示初始加载,通过单击事件只能更新年龄这个单一类型数据,Object的数据无法更新。

//问题:这个监听该怎么写才能在单击后正常显示或者更新呢?
     watch(props.init,(n)=>{
        console.log(n,"cesh");           
})

        return {num,num1,num2,ageg,dex}
    },
}
</script>


  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-07-03 12:47
    关注

    两个组件修改了一些地方,现在通了,你参考一下
    a.vue

    <template>
      <Shusan :init="ceshi" :age="age"></Shusan>
      <button @click="change">更新数据</button>
    </template>
    
    <script setup>
    import Shusan from './b'
    import { ref } from 'vue'
    let ceshi = ref({
      azu: [1, 2, 3, 4, 5],
      bzu: [1, 2, 3, 4, 5],
      czu: [1, 2, 3, 4, 5]
    })
    let age = ref(123)
    console.log(ceshi)
    
    const change = () => {
      ceshi.value = {
        azu: [11, 12, 13, 14, 15],
        bzu: [111, 112, 113, 114, 115],
        czu: [121, 122, 123, 124, 125]
      }
    
      age.value = 456
    }
    </script>
    
    

    b.vue

    <template>
      <div>{{ age }}</div>
      <div>{{ num }}</div>
      <div>{{ num1 }}</div>
      <div>{{ num2 }}</div>
      <div>{{ ageg }}</div>
      <div>{{ dex }}</div>
    </template>
    
    <script>
    import { ref, watch } from 'vue'
    export default {
      props: {
        init: { type: Object },
        age: { type: Number }
      },
    
      setup(props) {
        console.log('props', props.init)
        let dex = ref(props.init)
        let num = ref(props.init.azu)
        let num1 = ref(props.init.bzu)
        let num2 = ref(props.init.czu)
    
        let ageg = ref(props.age)
    
        watch(
          () => props.age,
          (n) => {
            console.log('n', n)
            ageg.value = n
          }
        )
    
        watch(
          () => props.init,
          (n) => {
            console.log('ceshi', n)
            dex.value = n
            num.value = n.azu
            num1.value = n.bzu
            num2.value = n.czu
          }
        )
    
        return {
          num,
          num1,
          num2,
          ageg,
          dex
        }
      }
    }
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月11日
  • 已采纳回答 7月3日
  • 创建了问题 7月3日

悬赏问题

  • ¥60 pb数据库修改或者求完整pb库存系统,需为pb自带数据库
  • ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路