组件传值之实时刷新

组件传值

在我们日常的开发中许多时候需要用到组件传值，个人在 vue、react、uniapp等常用框架中使用组建传值时都出现过，父子组件间传值，没能实时刷新值的变化，导致组件里的一些方法函数不能实时的调用等问题。

例：

这里用vue来举例

父组件
<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>

如果子组件的方法函数需要根据父组件传值进行调用可以直接在watch中调用