发布文章评论:(神奇的父传子 ,实际是 子传父 props第一次使用默认值)让父组件处理 关闭弹窗,发布内容展示在最顶部,清空文本 发布成功loading状态

117 阅读1分钟

通过 子传父事件: 让父组件处理 关闭弹窗,发布内容展示在最顶部,清空文本 发布成功loading状态

一 关闭弹层:3 步

1 子组件:发送自定义事件

image.png

2 父组件:监听子组件传递过来的自定义事件:

image.png

3 父组件:在methods中 关闭弹层

image.png

二 发布内容展示在最顶部

看起来是 父传子,实际上是 子传父

1.子组件: props中的list数据 是在子组件中发送请求获取的,然后push到 props中的list

子组件: 将原来的list数据,直接写到 props上,只要不影响数据使用 都可以随便传的感觉

image.png

2.父组件:先在data中声明一个 commentList :[ ]  ,然后将数据绑定到 自定义的子组件上 :list=commentList 其中 list 就是 子组件中的props的list数据

image.png

3. 父组件:最后将后端返回的结果在onPostSuccess(data) 放到unshift上:

image.png

三 在发布评论请求成功之前 添加一个loading状态

直接使用的,当前组件不需要引入其他东西,只要在main.js 引入过vant组件相关内容
   this.$toast.loading({
        message: '发布中...',
        forbidClick: true, // 禁用背景点击
        duration: 0, // 持续展示 toast
      })

image.png