vue组件之间的数据传递实例—评论留言自动刷新功能

最新推荐文章于 2025-07-06 15:58:57 发布

原创

最新推荐文章于 2025-07-06 15:58:57 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue中实现组件间的数据传递，特别是关注父组件如何通过事件绑定来触发子组件的评论刷新功能。文章指出，当没有数据时直接提交会导致错误，因为localStorage中的数据会持久存在。为解决此问题，文章提供了使用localStorage清除缓存的解决方案，并展示了代码实现的效果，包括未清除数据时的错误情况和清除后恢复正常的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：

1.最重要理解这里的父组件的刷新功能，通过v-on事件绑定委托给子组件执行，因为子组件的提交按钮和父组件的刷新评论的功能是分开的。

2.没有数据时直接点击提交按钮时会出bug，并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的，通过localStorage清除缓存，如下。最后的执行效果，会有演示，本来可以做出判断为空时，不给提交，这里为了说明这个问题

window.onunload=function(){
        localStorage.clear();
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
      <div id="app">
          
          <cmtbox v-on:flash="loadComment"></cmtbox>
          <!--将父组件的方法委托给子组件-->

          <ul class="list-group">
              <li class="list-group-item" v-for="item in list" :key="item.id">