（Vue 3、Nuxt 3）只有在 vs 代码中添加更改后，才会发出从子组件到父组件的值-解网

问：

我需要将高度值从 СhildСomponent 发送到 puzzleSelectBlockHeight ref 中的 pages/index 组件中。但问题是，这只有在我更改 index.vue 组件中的某些内容（例如更改文本或添加/删除 div）后才会发生。请告诉我为什么会发生这种情况以及如何解决？

演示：https://codesandbox.io/p/sandbox/test-2-zh3g8r?file=%2Fpages%2Findex.vue%3A11%2C20

https://zh3g8r-3000.csb.app/

nuxt.js vuejs3 vue-composition-api nuxt3 vueuse

只有在装入组件时才调用该函数。当您更改应用并保存时，应用将重新加载，组件也会重新装载。代码根据其编写方式工作。你没有具体说明你想要什么替代行为，或者为什么当前的行为是错误的，所以不清楚你希望如何“修复”。blockHeight

0赞 L1nk 11/6/2023

我想在应用程序的第一次挂载时立即将值从 СhildСomponent 发送到父组件 pages/index.vue，而不是在重新挂载时。

0赞 yoduh 11/6/2023

它确实在初始装载时发出。每次挂载组件时，onMounted 代码都会运行。如果它没有安装，您将不会在屏幕上看到它。您是否尝试过console.loging函数内部的值？也许它只是没有发出你期望的价值......如果它在初始装载时没有记录任何内容，那么你是对的，但这种验证很重要。height.valueblockheight

0赞 L1nk 11/7/2023

在控制台中，height.value 为 0，但在模板中 {{ height }} 显示正确的值。也许您可以建议如何在第一次安装应用程序时使用 ref=“PuzzleSelectEl” 将 div 的实际高度值发送到 parentComponent？

答：

0赞 yoduh 11/7/2023 #1

使用观察程序而不是 onMounted 挂钩。每当它发生变化时，它将能够发出新的高度。我还建议发出内部 ref 值而不是 ref 本身，因为跨组件的反应性将不起作用。观察程序仍将确保始终发出最新的高度值。

ChildComponent.vue 文件

function blockHeight() {
  emit('block-height', height.value)
  console.log('height', height.value)
}

watch(height, () => {
    blockHeight()
  },
  { immediate: true }
)

是的，现在它正在按我的预期工作！谢谢）但是我看到带有 class=“parent-block” 的块如何将他的初始高度更改为带有文本的 div 高度，也许您知道如何在没有此“跳转”的情况下在挂载页面之前使用 class=“parent-block” 渲染这个块高度？

上一个：Vue.js 3 和 Pinia 存储由 API 异步填充

下一个：如何使用 Vue 和 Urql 更新路由更改查询

（Vue 3、Nuxt 3）只有在 vs 代码中添加更改后，才会发出从子组件到父组件的值

(Vue 3, Nuxt 3) The value from the child component to parent component emits only after adding changes in vs code

评论

评论