vue.use 的使用， render里面的h是什么，路由钩子的执行过程

最新推荐文章于 2024-06-02 10:46:33 发布

原创最新推荐文章于 2024-06-02 10:46:33 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文深入探讨了Vue.js中Vue.use方法的使用方式及其在自动全局注册组件中的应用，并详细解释了Vue路由钩子的执行流程及组件间的传值方法。

Vue.use

Vue.use(js对象/function,参数)
js对象：{
install(Vue,options){
// 在Vue.use后，该方法会执行
}
}
function:function(Vue,options){
// 在Vue.use后，该方法会执行
}

// 1.这个是函数的注册
// export default function(Vue, options) {
//   console.log(options)
//   Vue.component(PageTools.name, PageTools)
// }
// 2.还一种是对象的形式
// export default {
//   install(Vue, options) {
//     console.log(options)
//     Vue.component(PageTools.name, PageTools)
//   }
// }

自动全局注册组件

render里面的h是：

路由钩子的执行过程

beforeRouteLeave ----导航离开该组件的对应路由时调用

beforeEach ----------------全局前置守卫

beforeEnter --------------------在路由配置里调用

beforeRouteEnter ---------------在被激活的组件里调用

beforeResolve ------------------同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

afterEach -----------------------全局后置钩子

路由更新：

beforeEach ----------------全局前置守卫

beforeRouteUpdate ----------------在重用的组件里调用

afterEach -----------------------全局后置钩子

组件传值之ref

父子组件传值

props与emit

ref传值

获取组件的实例对象

父获取子组件实例对象

子组件标签 ref="xxx"

子组件的this(实例对象)====this.$refs.xxx

子获取父组件实例对象

this.$parent===父组件的实例对象，它找到的父组件是最近的父组件

子组件标签如果是其它组件包着的就是其它组件是它的父级

如果子组件标签是原生标签包着的，它的父组件就是它所在的组件