Vue组件通信10种方式
父组件通过props向子组件传递数据
子组件通过$emit向父组件传递数据
$emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数。
兄弟组件通信
通过父组件为中间人获取到兄弟组件
事件总线
eventBus事件总线适用于父子组件、非父子组件等之间的通信,通过创建一个空的vue实例作为全局事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件
// main.js
Vue.prototype.$bus = new Vue(
// child2
this.$bus.$emit('bus', 'bus传值,组件2传过来的')
// child2
this.$bus.$on('bus', (msg)=> {
console.log('msg', msg)
})
vue两种router
hash模式
- 无需配置路径便可以直接访问各个路径，可以防止忘记配置路径。
- 哈希路由它只是改变hash值，不会重新加载页面。
hash模式是开发中默认的模式，它的URL带着一个#，例如：www.baidu.com/#/vue，它的hash值就是#/vue
hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。而且这样用起来非常的流畅，像使用APP一样。
history模式
history模式的URL中没有#，它使用传统的路由分发模式，就是说用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的处理，也就是它向服务器发起了一个请求差不错
如果我后端没有配置它的路径，页面容易出现404，也就是页面丢失的状态
分页功能
vue+element-plus分页
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background layout="prev, pager, next"
:total="total"
:page-size="10"
:page-sizes="[10, 20, 30, 40, 50, 100]"/>
</template>
<script>
export default {
name: "Pagination",
data() {
return {
dialogFormVisible: false,
tableData: [],
total: 0, //总条数
pSize: 10 //默认10条
}
},
methods: {
getDataList(index, pageSize) {
//获取数据列表
this.$axios.get('接口地址', {
params: {pageSize: pageSize, currentPage: index},
headers: {accessToken: ''}
}).then(response => {
this.total = response.data.data.rowCount;
if (response.data) {
this.tableData = response.data.data.data;
}
}).catch(err => {
alert(err);
})
},
handleSizeChange(val) {
console.log('每页' + val + ' 条');
this.pSize = val;
this.getDataList(1, val);
},
handleCurrentChange(val) {
console.log('当前页: ' + val);
this.getDataList(val, this.pSize);
}
},
mounted() {
this.getDataList(1, this.pSize);
}
}
</script>
<style scoped>
</style>
springboot+Pageable分页
@RestController
public class EmpController {
@Resource
private EmpRepository empRepository;
@GetMapping("/emp/findAll")
public Object findAll(@RequestParam(defaultValue = "0", value = "pageNo") Integer pageNo,
@RequestParam(defaultValue = "5", value = "pageSize") Integer pageSize) {
Pageable pageable = PageRequest.of(pageNo, pageSize, Sort.Direction.DESC, "sal");
Page<Emp> pages = empRepository.findAll(pageable);
// 当前页数
System.out.println("当前页数：" + pages.getNumber());
// 总页数
System.out.println("总页数：" + pages.getTotalPages());
// 查询出来的所有数据
System.out.println("查询出来的所有数据：" + pages.getContent());
// 是否有上一页
System.out.println("是否有上一页：" + pages.hasPrevious());
// 是否有下一页
System.out.println("是否有下一页：" + pages.hasNext());
// 当前页的上一页
System.out.println("当前页的上一页：" + (pages.hasPrevious() ? pages.previousPageable().getPageNumber() : pages.getNumber()));
// 当前页的下一页
System.out.println("当前页的下一页：" + (pages.hasNext() ? pages.nextPageable().getPageNumber() : pages.getNumber()));
return pages;
}
}