Vue常用面试题
Vue组件间的参数如何传递:
父组件与子组件传值
父组件传给子组件:子组件通过props方法接受数据; 子组件传给父组件:$emit方法传递参数
非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。
- 建议使用VueX,以获得更好的性能及体验
Vue路由的钩子函数:
beforeEach:route前置守卫:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。
Vue中过滤器的定义与使用:
- 定义
// 全局注册
Vue.filter('toRMB', function (value) {
return `¥${value}`
})
new Vue({
el: '#app',
data: {
money: 826.26,
},
// 局部注册
filters: {
toFixed: function(money) {
return money.toFixed(1)
},
},
)}
- 使用
<span>{ 100|toRMB }</span>
$route和$router的区别:
$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
什么是vue的计算属性?
在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。
好处:①使得数据处理结构清晰;②依赖于数据,数据更新,处理结果自动更新;③计算属性内部this指向vm实例;④在template调用时,直接写计算属性名即可;⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。
ElementUI的表单验证怎么实现?
- 在el-form-item上绑定prop
- 在data定义每个表单属性验证规则,如required,min,max等,并可在此定义验证时机及验证不通过提示文字
- 在el-form上绑定rules
如何全局配置ElementUI的size?
- 在引入 Element 时,可以传入一个全局配置对象,在该配置对象中配置。