vue面试题

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模式

1. 无需配置路径便可以直接访问各个路径，可以防止忘记配置路径。
2. 哈希路由它只是改变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;
    }
}