vue高阶组件面试怎么回（vue面试常见问题）

本篇文章给大家谈谈vue高阶组件面试怎么回，以及vue面试常见问题对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、4 React-Router基础、二级/动态路由、高阶组件、路由权限控制
• 2、高阶组件（HOC）
• 3、vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解

4 React-Router基础、二级/动态路由、高阶组件、路由权限控制

1、React-Router-dom;

(1).npm install react-router-dom; - 引入

(2).分类：HahRouter、BrowserRouter；                                                                                [1].HahRouter - localhost:3000/#/topics -其会在路径后添加#,容易与hash#混乱；                      [2].取别名[方便后续修改]：BrowserRouter as Router

(3).Route path="" component={} /Route;

[1].若只有一个Route/Route,默认path="/"; - 其也可以省略

[2].若有多个Route/Route，最后一个不写path,表示除了上面所示的路由，其它路由都会跳转到该组件；

(4).Switch/Switch;//匹配到便不会再向下匹配，常配合exact属性一起使用 = 匹配一模一样的，exact={true};也OK；

(5).Redirect to=""/Redirect;//重定向：若是以上都匹配不到，自动跳转到首页/或其它页

(6).路由跳转Link to=""; NavLink to="";// 最终都转换为a标签，但不能取别名，Vue中使用tag属性可以取别名；NavLink优势：其跳转页面，系统会自动加类名.active,巧妙利用更改样式；=两者大多结合exact属性使用；

2、二级路由：

3、动态路由：

跳转 - this.props - 路由的相关值

4、高阶组件withRouter(); - withRouter(组件);包裹组件即可 - 目的：使用其可让组件内所有元素拥有this.props.history/location/match等属性；

this.props.history.push('/');//重定向路由

5、路由权限控制 - React没有相关API，都要自己写；

(1).登录相关：登录成功种cookie - 其它页面查看 - 若有cookie,正常跳转页面，若没有，提示框+跳转登录页面；

(2).页面获取数据：1.父组件向子组件传值；2.某页面将数据设置到浏览器存储中，一般为localStorage其获取到的是JSON对象，JSON.parse(localStorage.getItem('articleList')); - 其它页面需要数据时，从存储中拿即可；

(3).高阶组件[包裹 - 返回具有某功能的组件]

(4).Prompt组件 - 进入/离开的时候都会进行询问；

[1].引入：import { Switch, Route, Redirect, Prompt } from 'react-router-dom';

[2].使用：Prompt message="" /Prompt; message= { () ={ return true/false }}

补充：

(1).form onSubmit={ this.handleSubmit }/form;

(2).e.preventDefault();//React中阻止默认事件只有此方法；

(3).Link、NavLink组件最终都转换为a标签 - React不能取别名，Vue可以 - React可使用高阶组件来解决此类需求；

高阶组件（HOC）

至少满足下列条件之一：

接受一个组件为参数，返回值为一个新的组件的函数，形如：

就是让新的组件继承自传进来的组件，这种做法react官方页不推荐。嵌套层级太深是一种灾难！

缺点： 因为HOC可以劫持props，在不遵守约定的情况下，可能会造成冲突。

vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解

vue 默认情况下，父组件是可以直接给子组件的根元素添加 class 和 style 的，但是有时候我们可能需要在父组件上给子组件添加一些特性绑定( attribute bindings )(我的理解是自定义属性和一些原生属性)到子组件的根元素上， inheritAttrs 就是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性，因为 inheritAttrs 默认为 true ，所以我们在父组件中给子组件添加所有特性绑定，都能绑定到根元素，例如下面

渲染后的dom节点：

把 inheritAttrs 设为 false 后，

渲染后的dom节点：

可以得出上述的结论， inheritAttrs 是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性。

注意：

我们可以把父作用域中传递的所有属性看作一个大的对象 obj ，而 $attrs 会继承 obj 中的一部分属性，这一部分属性的 key 不能为 class ，和 style ，也不能是当前组件声明的 props 值，并且父组件为 v-model 的话，也是不能继承指令封装的 value 值的，若当前组件无props设置， $attrs 则继承除 class 和 style 的所有属性。

通常我们给已封装的组件进行中间处理的时候使用，例如 element-ui 的 el-input ，我们需要把父组件中的传递的 props 直接给子组件的子组件的时候，我们就可以用到 $attrs ，例如：

父组件为：

子组件为：

根据上面所说，去掉 class ，去掉指定的 value ，去掉子组件 props 声明的 limit ，那时我们此的 $attrs 是：

我们对ui框架中的组件进行再封装的时候，例如element-ui中的组件 el-input ，我们把他封装到我们自己的组件内部。

例如 self-input 组件如下，

我们需要把 el-input 组件上自定义的事件传递进去，那么就要用到 $listenters 。

官网的描述：

很容易理解， .native 是给子组件根元素添加事件，自然不是用来传给子组件上的子组件或元素。而我们在父组件上给子组件绑定的所有事件，都会放入 $listeners 中，我们可以在子组件中手动过滤修改后传给子组件中的子组件或者元素上，也可以用 v-on="$listeners" ，直接全部传给子组件或者元素上。

用法也相当简单，例如：

父组件：

子组件：

由于父组件传入的是一个change事件和两个input事件，那我们打印的 this.$listeners 是

下面是一个关于限制小数点的完整demo，感兴趣的可以了解一下

关于vue高阶组件面试怎么回和vue面试常见问题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。