vue3 监听 props 变化

更新于 2023-09-04 09:55 631
专栏: 前端文章 标签: vue

在 Vue 3 中,可以使用 watch 函数来监听 props 的变化。下面是一个示例:

  1. <template>
  2. <div>
  3. <h1>{{ message }}</h1>
  4. </div>
  5. </template>
  6. <script>
  7. import { watch } from 'vue';
  8. export default {
  9. props: {
  10. propMessage: {
  11. type: String,
  12. required: true
  13. }
  14. },
  15. setup(props) {
  16. const message = ref(props.propMessage);
  17. watch(() => props.propMessage, (newVal) => {
  18. message.value = newVal;
  19. });
  20. return { message };
  21. }
  22. };
  23. </script>

在这个示例中,我们使用了 watch 函数来监听 props.propMessage 的变化。当 props.propMessage 的值发生变化时,我们将其赋值给一个名为 message 的响应式变量。此时组件中的 {{ message }} 也会随之更新。