福建做网站,百度推广登录平台网址,dw如何制作表格网页,软考网络规划设计师论文背景 如标题所示#xff0c;是因为vue watch props无效才看到这篇文章的。网上有一堆讲这个问题的解决办法。比如#xff1a;watch(() props.val1, (newValue) {...})。但是我用Vue3.3.4尝试后#xff0c;也是没有成功。可能是因为props.val1是一个Ref的问题吧是因为vue watch props无效才看到这篇文章的。网上有一堆讲这个问题的解决办法。比如watch(() props.val1, (newValue) {...})。但是我用Vue3.3.4尝试后也是没有成功。可能是因为props.val1是一个Ref的问题吧具体也没研究。 但是我这边是这样一个场景所以需要用watch监测props的变化。 我有一个A.vue需要通过props传给B.vue。而B.vue使用这个props构建一个ref用于展示界面。我希望在A.vue中更改传递给B的props的值以达到B.vue更改界面的需求。但是有一个问题ref只在onMounted的时候初始化一次后面不管怎样改动props这个ref都不会改变。所以才使用watch监测props的变化进而重新赋值给ref。但是我没成功。 那好那我就在B.vue中通过defineExpose导出一个函数比如reset()专门用于给ref重新赋值给props比如
const props defineProps({propsVal: String
})
const valRef ref(props.propsVal)function reset() {valRef.value props.propsVal
}
defineExpose({reset, // 导出后A.vue中可以调用B.vue中的reset方法
})这样A.vue中更改props的传入值后调用一下B.vue的reset()就可以了。 但是这个方法很麻烦有时候也会出现reset() function is not define.的错误提示。
解决方案 使用计算属性computed而不是引用ref。 因为计算属性也具有响应性也能过引起界面的更改。而且props的更改能反映到computed属性的更改。更改一下上面的例子
const props defineProps({propsVal: String
})
const valComputed computed(props.propsVal)tempatep {{ valComputed }} /p
/tempate补充 传给props的必须是一个简单类型比如boolean、number或者是响应式对象比如reactive({})。
