Vue分成四个阶段 第二段~
begin enjoy👇

Vue第二段

子组件传值给父组件(super important)

  • Vue是一个单向数据流框架,理论上只有父传子的直接操作,没有子传父的直接操作,因此需要做到子传父了效果了,则需要一个中间层的ViewModel对象来实现,具体操作步骤如下:
    • 单独声明一个中间ViewModel对象,直接new Vue()即可
    • 在父组件中通过VM对象的$on()方法监听一个事件的回调函数,$on()的第一个参数是监听的事件名称,可以是任意自定义事件,第二个参数就是监听事件执行的回调函数。那么就可以通过这个事件的执行最终拿到执行时的实参值赋值给父组件中的Model里的一个值来接收了
    • 最后就是在子组件中通过VM对象的$emit()方法来调用上边父组件中监听的自定义事件,并最终将参数值传递给监听的自定义事件,$emit()两个参数,第一个参数是要执行的事件名,第二个参数是执行事件回调时传递的实参

组件中的过滤器filter模块

  • 组件中可以通过filters来定义过滤器方法

  • 也可以直接利用Vue.filter()来定义全局过滤器,第一个参数是过滤器名称,第二个参数是过滤器行为。

    注意:如果全局过滤器名字和组件内过滤器同名时,那么Vue会优先使用组件内过滤器来使用

组件中的watch监听器模块

  • watch模块的作用就是可以监听Model里某个值变化时的新值和旧值,通过方法里的两个参数来获取到值变化前后的新旧值
  • 如果是对于复合json的深度watch时,则需要配置deeptrue,并使用handler来处理监视函数

组件中的computed计算模块

  • computed模块里的函数可以直接在视图中通过八字胡调用,而computed里的方法的触发则是在方法里用到的Model值发生变化时就自动会触发方法的调用,非常方便

组件的生命周期(super important)

  • new Vue()开始,伴随着Vue开始运行到用el将组件渲染到页面中某个地方,在Vue中都有虚拟DOM这样一个概念,那么组件从创建到销毁这一整个过程就是一个完整的生命周期过程,在不同生命周期里处理某些业务逻辑代码,可以达到立竿见影的效果,实际项目开发时,生命周期也是解决问题最好的入手点。

vue-router的使用

  • 需要引入vue-router.js文件,强大的Vue路由器可以利用跳转的方式来解决页面中具体要渲染的内容。

  • 首先需要通过Vueuse()方法引入VueRouter的中间件,中间件就是在使用Vue过程中额外使用的其他第三方插件的概念。

  • 然后就是实例化路由对象,通过routes来配置一条条的路由规则,每个路由规则都是一个路由对象,主要含有pathcomponent两个配置项

  • 最后就是在实例化VM对象时通过router配置上一步实例化的路由对象

  • 那么在组件中,可以通过使用vue-router提供的router-view组件来渲染根据路由路径路由要渲染的组件内容即可

  • 使用vue-router提供的router-link组件就可以做出来跳转路由路径用的超链接标签,通过属性to可以选择要跳转的路径。通过这里可以看出,而vue-router的实现原理其实就是锚链接

  • 一个实际项目中肯定会定义很多个不同的路由路径,那么实际开发时配置routes时仅仅只是靠pathcomponent还不够,需要一个name的配置项,这样每个路由路径都有个不同name时,router-link就可以通过v-bind的方式来绑定一个to,然后通过{name:路由路径名称}来完成根据路由路径的渲染

  • 使用vue-router时,当往路由路径链接的路径组件里传参时,则有两种传参方式,当然都是get类型的传参

    • query string传参规则,和以前的使用方式一样,依然是通过?后边拼接路径的参数传递
    • params string传参规则则是在路径中直接以/:参数名来配置参数,那么通过router-link传参时,则直接:to="{name:'路由路径名称',query/params:{参数名:'参数值'}}"
  • Vue的路由本质就是一个数组,因此也可以通过路由提供的方法addRoutes,来动态添加路由

  • 路由路径跳转时,不仅仅可以只跳转显示一个组件,也可以配置componentcomponents来配置多个组件的显示。那么就需要在定义<router-view>时,添加name属性来根据不同名称路由路径展示不同组件内容。并且还有默认值组件default,内部可以随意嵌套子组件,这样扩展起来很方便

    var router = new VueRouter({
        routers:[
            name:'home',
            path:'/home',
            components:{
            	'header':HeadVue,
            	'body':BodyVue,
            }
        ]
    });
    
    //那么在入口App中
    <router-view name="head"></router-view>
    
  • 路由路径可以嵌套使用,就是在某个路由路径里配置一个children选项,这样就可以在里边添加子路由路径了

  • 路由路径可以通过配置redirect来对项目首次访问时进行默认重定向跳转和404页面跳转

    router.addRoutes([
        {path:'/',redirect:{name:'home'}},
        {name:'home',path:'/home',component:Home,children:[
            {name:'home.movie',path:'movie',component:Movie},
            {name:'home.music',path:'music',component:Music},
        ]},
        {path:'*',component:NotFound}
    ]);
    
  • 路由钩子的使用,通过路由对象的beforeEach()方法可以在访问前进行拦截,你可以叫它路由拦截器也行,路由过滤器也行,随你开心就好。beforeEach()方法的参数是个回调函数,里边有三个参数,分别是tofromnextto表示当前路由路径要跳转到的目标路径地址,from表示从哪个路径发起的访问,next一个方法,如果传参false则表示阻止路径跳转,不传参则表示放行访问。可以搭配路由路径的meta元数据配置项来做一些路径跳转的权限判断使用,meta可以直接被to获取并使用。next()里也可以传递要跳转的路径的name配置,例如next({name:'login'})

    router.addRoutes([
        {name:'home',path:'/home',component:Home,meta:{checkLogin:true}}
    ]);
    
    router.beforeEach((to,from,next)=>{
        if(to.meta.checkLogin){
           next();
        }else{
           next(false);
        }
    });
    

posted @ Zycin (非转载 来自个人学习资料整理)