zoukankan      html  css  js  c++  java
  • Vue通过父子组件通信刷新页面

    问题

    在完成前端开发任务时,想在子组件中发布用户动态后,自动刷新页面便可看到刚发布的信息。

    尝试

    在子组件中简单通过this.$router.replace({path})并不能达到目的。几经查阅,寻得几种可以刷新页面的方法,并了解到父子组件通信。便想到一解决思路。

    思路

    子组件成功完成请求后,转递信息给父组件,准确一点说,子组件完成相关操作后通过this.$emit(),调用父组件的方法,在父组件的方法中完成刷新操作。
    重要的部分:

    • 如何刷新页面?
    • 如何当子组件完成操作时,父组件该如何响应?

    我所采用的刷新页面的方法是:

    1. 新建一个空的组键,为该组件编写created()
    created () {
        this.$router.replace({path: '/index'})
      }
    
    1. 在index.js中,为该组件进行注册
    {
          path: '/empty',
          name: 'empty',
          component: empty
        }
    
    1. 在父组件中,编写一方法跳转到该组件
    refresh () {
          this.$router.replace({path: '/empty'})
        }
    

    以上便是刷新页面的简单方法


    接下来便是父子组件通信
    我所采用的是通过vm.$emit()达到通信目的

    参考链接:
    https://cn.vuejs.org/v2/api/#vm-emit
    https://www.cnblogs.com/sweeneys/p/10201458.html

    1. 父组件中监听子组件所调用的方法
    <UserDynamic v-on:post="refresh"></UserDynamic>
    

    解析:

    • post为子组件中的方法,其中完成post请求
    • refresh为父组件的方法,响应监听时间
    1. 子组件内的post()使用this.$emit()
    post () {
          const token = localStorage.getItem('token')
          this.$axios.post('/dynamic/', {
            content: this.userDynamic.content
          }, {
            headers: {
              'Authorization': token
            }
          })
            .then(response => {
              if (response.data.code === 200) {
                this.$emit('post')
              }
            })
        }
    
  • 相关阅读:
    我的图片爬虫demo
    修改django后台用户名和密码
    mybatis知识点(已掌握)
    python3与python2的区别(目前遇到的)
    Linux 日常命令
    手机号码归属地查询api接口
    Install-Package EntityFramework -version 5.0.0.0
    【迁移】—Entity Framework实例详解
    Android Http请求方法汇总
    Android数据存储的5种方法
  • 原文地址:https://www.cnblogs.com/masker99/p/14874073.html
Copyright © 2011-2022 走看看