Vue3父组件props数据更新后,子组件视图未及时响应更新

发布时间:2023年12月30日

问题描述:

在使用Vue3构建前端项目时,遇到了一个组件props数据更新后,子组件视图未及时响应更新的问题。具体表现为父组件向子组件传递的props数据发生变化,但在子组件中该props并未触发视图重新渲染。

分析问题:

在Vue3中,由于引入了Composition API,对于props的处理方式和Vue2有所不同。Vue3使用setup()函数进行组件的初始化,并通过defineProps()来声明并获取组件的props。如果直接在setup中引用props,Vue默认不会自动追踪其变化,因此当props数据发生改变时,视图可能不会随之更新。

解决步骤:

  1. 使用reactive()函数将props转换为响应式对象,这样当props数据发生变化时,会触发依赖更新,从而刷新视图。
  2. 如果props是基本类型(如字符串、数字),也可以通过watchAPI来监听props的变化,然后手动触发视图更新。
    <template>
      <div>{{ childMessage }}</div>
    </template>
    
    <script>
    import { defineComponent, watch } from 'vue';
    
    export default defineComponent({
      props: {
        parentMessage: String
      },
      setup(props) {
        let childMessage = props.parentMessage;
    
        // 监听props的变化
        watch(
          () => props.parentMessage,
          (newVal) => {
            childMessage = newVal;
          }
        );
    
        return {
          childMessage
        };
      }
    });
    </script>

    通过以上两种方法,我们就可以确保当父组件传递给子组件的props数据发生变化时,子组件能够正确地响应并更新视图。

文章来源:https://blog.csdn.net/weixin_46112225/article/details/135295567
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。