父组件监听本地vuex中的数据,然后传递给子组件,子组件也要监听才能变化

//父组件
<heart-wear-connection :isShouhuan="isShouhuan"></heart-wear-connection>
watch: {
	    getwear: function(a, b) {
			console.log("修改后为:" + a);
			if(a === 'y'){
				this.$nextTick(function(){
					this.isShouhuan = true
				})
			}else{
				this.$nextTick(function(){
					this.isShouhuan = false
				})
			}
	    }
	},
	computed:{
		getwear() {
			return this.$store.state.ifLinkWatchSuccess
		}
	},



子组件
<view style="font-size: 26upx;padding-top: 10upx;color: #999999;" v-if="!isShouhuan1">
				未连接
			</view>
			<view style="font-size: 26upx;padding-top: 10upx;color: #30D969;" v-else>
				已连接
			</view>

		props: {
			isShouhuan: {
				default: true,
				type: Boolean
			}
		},
		watch: {
			isShouhuan: {
				immediate: true,    // 这句重要
				handler (val) {
				  this.isShouhuan1=val
				}
			}
		},
		data() {
			return {
				isShouhuan1: this.isShouhuan,
			}
		},

  使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

猜你喜欢

转载自www.cnblogs.com/fdxjava/p/13209273.html