子组件监听props中的值，监听不到旧值的相关问题

最新推荐文章于 2024-07-25 13:56:28 发布

weixin_34292959

最新推荐文章于 2024-07-25 13:56:28 发布

阅读量1.7k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c3aa44d6fb9a049b3483630

版权

昨天，在项目中做一个功能，一个tab切换，点击其中一个tab的时候，调用组件中的查询方法，切只调用一次。再次切换的时候不再调用。

我的做法是：

在父组件中创建一个变量，初始化data中设为0，在点击tab的时候设为1。将变量传给子组件，在并且在子组件中监听这个变量，然后执行查询方法。

但是，我遇到了一个问题，就是在子组件中只能监听到新的值，监听不到旧的值，代码如下：

父组件：

<template>
    <div>
	<div v-if="100 == whitchOne">
	    <packageitems :packagedata="packageData" :number1="number1"></packageitems>
	</div>
    </div>
</template>
import packageItems from "@/views/cart/components/newAssets/packageItems";
export default{
  data(){
    return{
       number1:'0'
    }
  },
  methods:{
    showOwn(idx) {
	if (idx == 100) {
	    this.number1 == 1 ? '' : this.number1 = 1;
	}
    }
  }
}复制代码

子组件：

watch: {
	// 点击新增资产搜索
	number1: {
		handler: function(val, oldval) {
			console.log("val:" + val, "oldval:" + oldval);
			if (val == '0') {
				return false;
		}
		this.getPackages((this.keywords = this.formData.addAsset.packName), (this.prodNbrs = ""));
	},
	immediate: true,
	deep: true
},
复制代码

每次打印出来的值就是

val: 1 oldval: undefined复制代码

找了许久，都没有找到原因是什么，后来才发现原因不在于watch，而在于父组件中的v-if，不应该用v-if，而是应该用v-show

那么下面我们来说一下v-if和v-show的区别：

v-if：根据后面数据的真假，从DOM树上直接删除或重建DOM节点；如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译。
v-show：只是修改diaplay的属性的显示和隐藏，元素始终在DOM树上；在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留

在我所做的功能中显示隐藏组件用的是v-if，所以组件在初始化的时候是number1是没有被编译的，而且每次切换到该组件的时候都是重新编译，这样旧值就一直都是undefined。而v-show则不同，它初始化的时候就被创建了，切换就是显示和隐藏，不存在没有被编译找不到元素的情况。所以在这种会频繁切换的功能中要用v-show。

转载于:https://juejin.im/post/5c3aa44d6fb9a049b3483630