点击添加留言按钮,清空placeholder,并自动实现router-view的局部刷新(不是整页刷新)显示出新增的留言
局部刷新的实现就是通过代码中的自定义事件reload,具体就是从表单组件开始发送reload事件,其父组件Message.vue收到后,再继续发送reload事件给外层的视图Home.vue,Home的再外层就是App.vue了,Home.vue的定义如下:
<template> <el-container> <!-- 侧边栏 --> <el-aside> <side-bar></side-bar> </el-aside> <!-- 主体部分 --> <el-main> <el-main> <router-view @reload="reload" v-if="isRouterAlive"></router-view> </el-main> </el-main> </el-container> </template> <script> import SideBar from "components/common/sidebar/SideBar"; export default { name: "Home", components: { SideBar }, data() { return { isRouterAlive: true }; }, props: { isReload: "" }, watch: { isReload() { this.reload(); } }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(() => { this.isRouterAlive = true; }); } } }; </script> <style scoped> .main-el-container { height: 750px; border: 1px solid #eee; } .main-el-aside { background-color: rgb(238, 241, 246); } </style>里面有一个reload方法,通过改变isRouterAlive来让router-view先隐藏,再显示,实现重新挂载。