「工作」-vue组件监听props监听不到

背景

最近在实现一个功能的时候发现,在一个vue页面中组件的部分一直不能展示,看了看代码,展示条件也符合啊,为何展示不出来呢?在仔细看了下逻辑,发现组件只有在接收props中的值发生改变的时候,才会执行下面的逻辑,才会展示内容。

代码

// 父页面
<div class="nav">
   <div class="nav-item" 
	   :class="{'active':type=='scatter'}" 
	   @click="onTabClick('scatter')"
   >
  		短暂
  </div>
  <div 
  	class="nav-item" 
  	:class="{'active':type=='bid'}"
  	@click="onTabClick('bid')"
  >
  		长期
  </div>
</div>
  <div class="content">
    <scatter
	    v-show="type=='scatter'" 
	    :city="cityLocation"
    ></scatter>
    <bid 
    	v-show="type=='bid'">
    </bid>
</div>

data () {
    return {
      type: 'scatter',
      cityLocation: null,
    }
  },
// 子组件
props: {
   city: {
     type: Object
   }
 },
watch: {
   cityLocation (city) {
     this.getData(city.key)
   },
   city (city) {
     this.cityLocation = city
   }
 },

此时我打印watch监听的city发现并没有值,但是父组件的cityLocation已经赋值了。

解决办法

深度监听

watch: {
  city: {
    handler(city) {
      this.cityLocation = city;
    },
    // 代表在wacth立即先去执行handler方法
    immediate: true
  }
}

额外

看了一些文章了解到,watch还有一个deep属性,默认值是false,代表是否深度监听。比如要监听的是一个对象,受现代JavaScript的限制,vue不能检测到对象属性的添加或删除。由于vue会在初始化实例时对属性执行getter/setter转化过程,所以属性必须在data对象上存在才能让vue转换它,这样才能让它响应。默认情况下 handler 只监听obj这个属性它的引用的变化,我们只有给obj赋值的时候它才会监听到,比如我们在 mounted事件钩子函数中对obj进行重新赋值。这样我们的 handler 才会执行。
相反,如果我们需要监听obj里的属性的值呢?这时候deep属性就派上用场了!deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值