目录1 问题描述假设子组件 ChildComponent 中有个属性a，默认值为 0，而且通过侦听器 watch 监听其数值变化。在父组件 ParentComponent 中调用子组件并将属性a的值赋为1通报给子组件，发现子组件模板中a的值是1，但是 watch 并未监听到属性a的值发生了变化。 子组件示例代码： [code]<template> <!-- a的值显示为1 --> <div>{{ a }}</div> </template> <script setup> import { watch } from 'vue' const props = defineProps({ a: { type: Number, default: 0 } }) watch( () => props.a, (newValue, oldValue) => { // 下方信息不会打印在控制台中 console.log('a has changed', newValue, oldVlue) } ) </script> [/code]父组件示例代码： [code]<template> <ChildComponent :a="1" /> </template> [/code]2 引发原因[code]Vue官网：watch 默认是懒执行的：仅当数据源变化时，才会执行回调。[/code]Vue 在渲染模板时，先渲染子组件，然后渲染父组件。子组件在初始化时，属性a的值被赋为默认值0，然后父组件举行初始化，将 a=1 通报给子组件，子组件吸取后将新值覆盖掉原来的旧值，完成初始化。由于子组件属性是相应式的，所以从0变化为1后，会更新模板视图。该过程发生在组件初始化阶段，watch 函数首次举行绑定，不以为数据源发生了变化，所以不会执行回调。 3 办理方法Vue 提供了 [code]immediate[/code] 属性，设置该属性后可以让 watch 函数首次绑定后立即执行一次回调，获取最新的属性值。 [code]watch( () => props.a, (newValue, oldValue) => { // 打印效果为 a has changed, 1, 0 console.log('a has changed', newValue, oldVlue) }, { immediate: true } // 添加此行 ) [/code]到此这篇关于Vue3子组件watch无法监听父组件通报的属性值的办理方法的文章就先容到这了,更多相关Vue3 watch无法监听通报的属性值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章盼望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328568p6p.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 07:25 , Processed in 0.029436 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
