vue 双向绑定问题$emit无效

最新推荐文章于 2023-07-20 17:52:55 发布

原创最新推荐文章于 2023-07-20 17:52:55 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue双向绑定问题emit无效 #emit双向绑定无效 #emit双向绑定

vue精选专栏收录该内容

18 篇文章

订阅专栏

博客探讨了Vue中遇到的双向绑定问题，具体表现为子组件通过$emit触发父组件方法更新变量后，子组件的数据未能同步更新。原因是异步问题，解决方案是使用setTimeout为0来同步操作。

父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变

父组件：

<div>
	// 子组件
	<son :status.sync="status"/>
</div>

<script>
export default {
	data(){
		return{
			status:false
		}
	}
}
</script>

子组件：

<div @click="change"></div>
<script>
export default {
props:{
	status: {
      type: Boolean,
      default: false
    }
}
methods:{
	change(){
		console.log(this.status, 1)  // false
		this.$emit('update:status', true)
		console.log(this.status, 2)  // false
	}
}
}
</script>

存在上面问题，$emit 触发后值还是没有变化的

原因： $emit传给父组件后，不能立马传给子组件，这中间存在一个异步的问题，所以加一个setTimeout为0，解决这个异步问题

	change(){
		console.log(this.status, 1)  // false
		this.$emit('update:status', true)
		setTimeout(() => {
       		console.log(this.status, 2)  // true
     	}, 0)
	}