Vue 中 props的异步传递

最新推荐文章于 2024-04-04 19:07:33 发布

Grey..

最新推荐文章于 2024-04-04 19:07:33 发布

阅读量950

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_59229847/article/details/120866018

版权

Vue 组件通信 $nextTick props 数据同步

关键词由CSDN通过智能技术生成

// 父组件
<son ref="mySon" :age="age" />
<button @click="sned">修改id</button>
data() {
  return {
    age: 0
  }
}
methods: {
	send(){
		this.age++ 
        console.log('我的年龄是' + this.age) // 1
		console.log(this.$refs.myson.age) // 0
	}	
}
//子组件

 props: {
    age: {
      type: Number,
      required: true
    }
  },

如果需要获取同步之后的最新的props数据，要使用$nextTick()

// 父组件
<son ref="mySon" :age="age" />
<button @click="sned">修改id</button>
data() {
  return {
    age: 0
  }
}
methods: {
	send(){
		this.age++ 
        console.log('我的年龄是' + this.age) // 1
		this.$nextTick( () => {
            console.log(this.$refs.myson.age) // 1
        })
	}	
}
//子组件

 props: {
    age: {
      type: Number,
      required: true
    }
  },