目录:
1、什么是自定义指令,有哪些钩子函数及自定义指令的使用场景
2、父组件获取异步动态数据传递给子组件,报错如何解决?
3、vue-router有哪几种导航钩子
4、vue-router参数传递方法详述及区别
1、什么是自定义指令,有哪些钩子函数及自定义指令的使用场景
使用场景:某些情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
2、父组件获取异步动态数据传递给子组件,报错如何解决?
1、开始的时候让子组件隐藏,然后等数据返回的时候,让子组件显示
通过v-if,也就是判断数据是否为空,为空就不渲染,也能解决了
2、添加默认值 为不能读取的属性添加一个默认值,就可以很好的解决了
3、vue-router有哪几种导航钩子
1 、全局导航钩子
beforeEach
beforeResolve
afterEach
2 、某个路由独享的导航钩子
beforeEnter
3 、路由组件上的导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
4、vue-router参数传递方法详述及区别
1 、第一种
配置路由 { path: "/info/:id?", name: "info", component: Info }
跳转的路由: <router-link to="/info/007"></router-link>
接受参数 this.$router.params.id
优点是:简单,页面刷新数据还在,
缺点是:不能传对象,地址栏会变得长而丑陋
2、第二种
配置路由: { path: "/info", name: "info", component: Info }
this.$router.push({name: "info",params: { id: 007 }})
接受参数:this.$route.params.id
优点是:可以传对象,优雅
3、第三种
配置路由: { path: "/info", name: "info", component: Info }
this.$router.push({ path: '/info', query: { id: id } })
接受参数: this.$route.query.id
优点是:可以传对象
网友评论