vue 子组件获取prop的变化(vue中props值怎么在方法中使用),本文通过数据整理汇集了vue 子组件获取prop的变化(vue中props值怎么在方法中使用)相关信息，下面一起看看。

　　 vue3组件如何通过props传递数据来获取更新的dom？现在有这样的要求，固定宽度的显示框内容超过隐藏内容，给出提示内容。该方案通过判断dom的scrollWidth和offsetWidth之间的大小来决定是否省略隐藏

　　 vue3组件如何通过props传递数据来获取更新的dom？

　　现在有一个要求，固定宽度的显示框超过隐藏内容，给出提示内容。

　　解决办法

　　使用dom的scrollWidth和dom的offsetWidth，通过判断两者之间的大小来决定是否省略隐藏。当然，也可以使用getBoundingClientRect api来获取dom的宽度。

　　然后用element-plus中的el-tooltip组件封装它。

　　遇到的问题

　　以上方案可行，但问题在于如何动态监控dom的宽度来动态省略和隐藏。我相信它和我的一样好。一开始想在子组件里更新的hook函数里操作这个dom，结果事与愿违。请看下图，大致意思是如果组件更新后需要操作dom，请使用nextTick()。

　　如何解决

　　问题找到了，但是如何解决，如何合理使用nextTick()。至于nextTick()的原理，只给出一个大概的思路。

　　 NextTick()，它在下一个DOM更新周期结束后执行延迟的回调。使用此方法可以在修改数据后立即获取更新的DOM。

　　由于updated中无法获取ref的实例，所以我认为watch()的api有三个参数，我将重点放在第三个参数上。

　　除了这些属性{deep: true，immediate:true}之外，第三个参数中的另一个属性是flush:\post\ ，因为需要动态监控数据的宽度是否超过隐藏。因为nextTick() api不能在watch中使用，那是什么意思？请看下面

　　我们看到在vue中，首先执行监听器，然后更新dom。第一次是null，因为dom还没有生成。当我点击第一次和第二次时，执行监听器，然后获取最后一个dom内容，最后执行update来触发更新。

　　让我们添加flush:\post\ 然后执行它。

　　摘要

　　最后，如果我们需要在更新watch中的数据后获取最新的dom，我们可以添加一个flush: \post\ 属性来获取摘要。

　　主要是监控watch中数据的变化来获取dom的变化，最终做出实时的响应变化。

　　世上无难事，只要你肯放弃，加油。

　　更多vue 子组件获取prop的变化(vue中props值怎么在方法中使用)相关信息请关注本站，本文仅仅做为展示！