简答题

1. 父传子有哪些方式

• 子组件通过组件内的 props 属性进行接收

• 通过 EventBus 进行传输

2. 子传父有哪些方式

• 子组件向父组件传值没有直接方法，我们可以采用：

• 自定义事件：当子组件传值的时候可以触发自己的自定义事件，从而由自定义事件和父组件取得联系

• EventBus：同样可以使用这个方法进行通讯，理论上来说说这个方法可以使用与任意两个组件的传值

2. 如何让 CSS 只在当前组件中起作用

• 在单文件组件中的 style 标签设置 scoped 属性

4. keep-alive 的作用是什么

• 主要用于保留组件状态或避免组件重新渲染。

5. vue 中如何获取 DOM

• 使用传统的原生方法

• 给子组件添加 ref = name，然后使用 this.$refs.name 获取 dom 元素

6. 请说出 Vue CLI 项目中 src 目录每个文件夹的文件的用法

• assets - 静态资源目录，内部存放资源文件，例如图片、json、音视频等

• components - 项目组件目录，内部存放所有组件

• App.vue - 根组件，相当于之前使用的根实例

• Main.js - 入口文件

7. 单页面应用的优缺点

• 优点：

• 前后端分离开发， 提高了开发效率。

• 业务场景切换时， 局部更新结构。

• 用户体验好， 更加接近本地应用。

• 缺点：

• 不利于 SEO。

• 初次首屏加载速度较慢

• 页面复杂度比较高。

8. $router和$route 的区别

• $router 是一个 VueRouter 中的一个全局对象，里面包含了 vueRouter 很多方法和属性

• $route则是对应着每个路由，每个路由的$route 都是不同的，里面包含了 path、name、params 等路由相关信息

9. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

• 定义路由规则时， 将路径中的某个部分使用 : 进行标记， 即可设置为动态路由。如：path：'/a/b/:id'

• 获取传值的方法：

• 使用$route.params.动态路由值 比如 $route.params.id 可以获取当前路由的动态值

• 设置 props: true 可以允许当前路由接收参数，通过路由的 props 设置数据， 并通过组件 props 接收

10. vue-router 有几种模式，分别是什么

• hash 模式：默认模式，兼容性好，地址中一定有一个 #，前进和后退功能设置起来比较麻烦

• history 模式：HTML5 中提供的新模式，可以对 url 进行变更出处理，书写简便、格式美观、可存储的数据量也比 hash 大，但是兼容性较差，并且页面刷新可能会出现问题