vue父组件向子组件传对象,不实时更新解决

  • Post author:
  • Post category:vue

思路1:就是让利用v-if的重新渲染机制

1.首先考虑的就是手动刷了,给组件加个v-if=”someShow“;

2.在父组件添加如下方法;

//  这是组件上写法 :<my-component v-if="someShow"></my-component>

// 下边写在父组件的methods里
refesh:function(){
	this.someShow=false;
	var _this=this;
	this.$nextTick(function(){
		_this.someShow = true;
	})
  
}
// $nextTick
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM  这样重新渲染就会是最新数据了

这样就完美解决了不更新的问题。、

思路2:利用watch监听

在子组件中监听你要的数据,当然别监听对象,监听了不一定好使。亲测不好使,测过好使的,可以给我留言。

    data:function(){
		return {
			title:"",
			content:"",
			btn:""
		}
	},   
     methods:{
		changeTitle:function(){
			this.title=this.listTitle;
            // 这里的每次变化了就复制给组件上的变量,视图也就更改了			
		},
		changeList:function(){
			this.content=this.listList;
		},
		changeBtn:function(){
			this.btn=this.listBtn;

		}
	},
	watch:{
		listTitle:"changeTitle",
		listList:"changeList",
		listBtn:"changeBtn"
		// 冒号前边这个就是从父组件传过来的,后边的就是变化了的监听函数
	}

 


版权声明:本文为weixin_41229588原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。