uniapp里组件传值的异常情况(Watch方法的使用)

Posted 2020-11-24 远方_未至

 在用父组件传值给子组件一个参数后遇到了一个问题:

我在父组件传一个 ID值给子组件,但是子组件接收后,通过created生命周期或mounted生命周期里打印传递过来的值都是随机值,并不是我所传递过来的,

原因是:子组件得ID值在前,而父组件在传过去为后.

代码如下

 父组件
<template>
    <view>
       <aaa :id=‘id‘></aaa>  
    </view>
</template>
  
<script>
　　data(){
　　　　return{
　　　　　　id:19754
　　　　}
　　},
　　onload(){

　　　　console.log(‘‘id‘,this.id)

　　},

   method:{
     　　 
  }
</script>


子组件
<template>
    <view>
      {{id}}
    </view>
</template>
  
<script>
　　props:[‘id‘],
　　data(){},
　　mounted(){
　　console.log(‘id‘,this.idid)
 　},
    method:{
     　　 
    }
</script>

 解决办法:
通过watch来监听传递过来的字段:把这个字段赋值给一个新字段
<template>
    <view>
      {{newID}}
    </view>
</template>
  
<script>
　　props:[‘id‘],
　　data(){
　　　　return{
　　　　　　newId:‘‘
　　　　}
　　},
　　mounted(){
　　console.log(‘id‘,this.idid)
 　},
　　watch:{
　　　　id:fuction(){
　　　　　　this.newID = this.id
　　　　}　　
　　　　console.log(this.newID)
　　},
    method:{
     　　 
    }
</script>