记录一下vue2中watch监听props中的值，不生效的问题

已于 2022-03-24 21:54:23 修改
阅读量3.2k 收藏
点赞数 1
文章标签： 前端
于 2022-03-24 21:48:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55304282/article/details/123722567
版权

今天遇到了一个问题,可能自己习惯写vue3的写法，忘记了vue2中的写法。在此记录一下

 

我在props中申明了一个接受了父组件传下来的value

props：{

value:{

type:String

}

}

在watch中错误的使用了使用了this.value 。我的理解是写死了。正确的写法是

顺便记录一下

$watch方法和watch配置项内部实现的原理是一致的。但是$watch更加灵活，它并不是组件一初始化就立即监听的。而是在某个时候你想要监听的时候才进行监听

Eonnf-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE面试题和详细答案
05-19
以下是一些Vue面试中常见的问题及其详细解答： 1. **Vue的优点**： - **轻量级**：Vue专注于视图层，体积小巧，仅几十KB。 - **简单易学**：中文文档使得学习障碍减少，便于理解和上手。 - **双向数据绑定**：...
Vue面试题.docx
04-21
2. **父组件向子组件传递数据**：使用`props`属性将数据向下传递。 3. **子组件向父组件传递事件**：子组件可以通过`$emit`方法触发自定义事件，向父组件传递数据。 4. **v-show和v-if指令的区别**：两者都可以...
vue watch监听不生效，解决办法
a913396的博客
06-25 1553
1、在data里定义监听的属性，解决问题。
关于vue props watch监听不生效的问题
糯米鸡的博客
06-13 2209
发现子组件初始化的时候（页面初次加载），watch里的函数并没有执行，必须在created里面调用一次this.getDetail(this.id)，才能初始化执行。里手动调用一次，就必须使用。
Vue2之父子组件传值中使用watch监听props中的对象
最新发布
yuanjinshenglife的专栏
05-07 1620
Vue2之父子组件传值中使用watch监听props中的对象
vue watch props无效
qq_43478653的博客
12-13 1685
如标题所示，是因为vue watch props无效才看到这篇文章的。网上有一堆讲这个问题的解决办法。。但是我用Vue3.3.4尝试后，也是没有成功。可能是因为props.val1是一个Ref的问题吧，具体也没研究。但是我这边是这样一个场景，所以需要用watch监测props的变化。我有一个A.vue，需要通过props传给B.vue。而B.vue使用这个props构建一个ref，用于展示界面。我希望在A.vue中更改传递给B的props的值，以达到B.vue更改界面的需求。
vue 中watch props 初始化没有生效问题
m0_57895351的博客
04-01 709
问题描述：watch 查看props数据子组件初始化无法感知props数据的变更。解决：在watch 中添加immediate: true即解决。
vue2 用watch监听props 失效，解决办法
柑橘乌云_
06-20 1445
这样子好像TCshow的值并没有赋上。这个是父组件传递下来的props。
Vue2 watch监听props的值
qq_46617584的博客
03-23 8022
再次遇到监听子组件收到父组件传过来的值，如果这个值变化，页面中的值发现是不会跟着同步变化的。所以监听props中的值，一直监听。
解决Vue2.0 watch对象属性变化监听不到的问题
10-18
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2.0用 watch 观察 prop 变化(不触发)
12-11
本文介绍了Vue2.0用 watch 观察 prop 变化(不触发)，分享给大家，具体如下： A 组件： export default { props:{ name:{ type:String } }, data () { return { author: "Jinkey" } }, mounted:function...
Vue面试题2023.docx
04-01
2. **父组件向子组件传递数据**：通过`props`属性，父组件可以将数据作为属性传递给子组件。 3. **子组件向父组件传递事件**：子组件使用`$emit`方法触发自定义事件，父组件通过监听这些事件来接收数据。 4. **v-...
Vue2中watch监听props属性无效不触发，而computed可以监听到
weixin_44679078的博客
01-12 1万+
问题 父组件通过props传递数据对象中的某个属性值给子组件，子组件中watch监听传来的props的变化执行某些内容。父组件中循环调用自己嵌套了多层。出现即使修改了传值，watch也没有监听到，而computed可以监听到的情况。我遇到的问题大概就是以上的情景，实际项目中更为复杂，难以描述得非常清楚。 解决 使用immediate选项。 原本这个选项是用于要立即以当前值触发监听处理回调的，但是遇到上面这种情况开启这个之后就神奇的解决了。 例如，监听的是传入的checked属性 // children.vu
在Vue中，为什么从 props 中解构变量之后再watch它，无法检测到它的变化？
Lee Chen的博客
04-08 1210
函数包装一个对象时，它会返回一个代理对象，该代理对象的顶层属性会变为响应式的。换句话说，只有第一层属性会变为响应式，而嵌套的对象或数组则保持原样，不会变为响应式。函数在某些情况下很有用，例如当您不需要对整个嵌套结构进行响应式处理时，可以通过使用浅响应式代理来提高性能。这个值是非响应式的，因此 Vue 无法检测到它的变化。然而，对于嵌套的属性，如。时，您实际上是访问了一个响应式代理，这使得 Vue 能够检测到。函数会创建一个浅响应式的代理，使得在访问或修改。，Vue 无法检测到其变化，因为它没有变为响应式。
vue watch props 不触发_Vue面试汇总
weixin_39945792的博客
11-25 992
1、vue数据双向绑定原理以及订阅者模式核心就是利用Object.defineProperty 方法Object.defineProperty(obj, prop, descriptor) descript最核心是get 和 set当我们访问了该属性的时候会触发 getter 方法；当我们对该属性做修改的时候会触发 setter 方法。一旦对象拥有了 getter 和 setter，我们可以简单地...
Vue2之父子组件传值与watch监听案例
yuanjinshenglife的专栏
02-17 1318
Vue2之父子组件传值与watch监听案例
vue中子组件的created、mounted钩子获取不到props中的值
qq_43432157的博客
01-12 800
父组件 <router-view ref="mychild" :setTree="setTree" :scheduleList='scheduleList'></router-view> <script> export default { data() { return { setTree: [], } } } </script> 子组件 props: { setTree: Array, }, data()
记录vue2 select下拉切换时props更新反应慢一步
chentianchengBUG的博客
09-27 376
问题：select下拉的时候打断点看见值变了 但是我:value=''val''的值过去了，但是我调用的接口的值却没有变化 解决方案 在子组件监听传过来的值 warehouseId: { handler(newName) { this.warehouseId = newName this.getMaterialLists() }, immediate: true } ...
vue2中的watch监听
热门推荐
weixin_47619284的博客
07-23 2万+
vue2中的watch监听
vue3中watch监听props参数
10-15
在Vue3中，可以使用`watch`函数来监听`props`参数的变化。具体实现如下： ```javascript import { watch } from 'vue'; export default { props: { propA: { type: String, default: '' } }, setup(props) { watch(() => props.propA, (newVal, oldVal) => { console.log(`propA changed from ${oldVal} to ${newVal}`); }); } } ``` 在`watch`函数中，第一个参数是一个函数，返回需要监听的值，这里是`props.propA`。第二个参数是一个回调函数，当监听的值发生变化时会被调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值