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

最新推荐文章于 2024-05-25 11:37:13 发布

何迟

最新推荐文章于 2024-05-25 11:37:13 发布

阅读量2k

点赞数

分类专栏： Vue 前端开发也蛮有意思的

本文链接：https://blog.csdn.net/qq_42036616/article/details/82955967

版权

注意：

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>

最低0.47元/天解锁文章

何迟

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue组件之间的数据传递实例—评论留言自动刷新功能

注意：1.最重要理解这里的父组件的刷新功能，通过v-on事件绑定委托给子组件执行，因为子组件的提交按钮和父组件的刷新评论的功能是分开的。2.没有数据时直接点击提交按钮时会出bug，并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的，通过localStorage清除缓存，如下。最后的执行效果，会有演示，本来可以做出判断为空时，不给提交，这里为了说明这个问题...
复制链接

扫一扫