父传子、父子组件访问、slot的使用、作用域插槽、参数传递、导航守卫之全局守卫

1、父传子

(1)props:[‘cmovies’,‘cmessage’]

(2)类型限制

props:{
cmovies:Array,
cmessage:String,
}

(3)提供一些默认值

props:{
cmessage:{
type:String,
default:'aaaaa',
required:true
},
//类型是对象或者数组时,默认值必须是一个函数
cmovies:{
type:Array,
default(){
return []
  }
 }
}

(4)多个可能的类型

props:{
cmovies:Array,
cmessage:[String,Number],
}

2、父子组件访问

(1)父组件访问子组件使用 c h i l d r e n 或 children或 children或refs

$children用的很少,除非是想要拿到所有的子元素;

$refs对象类型,默认是一个空对象,ref=‘bbb’;

(2)子组件访问父组件:使用$parent

this.$parent

(3)访问跟组件$root

3、slot的使用

(1)插槽的基本使用:

(2)插槽的默认值:默认的代码

(3)如果有多个值,同时放入到组件进行替换时,一起作为替换元素

(4)具名插槽的使用

4、作用域插槽

父组件替换插槽的标签,但是内容由子组件来提供

//子组件
<slot :data = 'languages'>
   <ul>
      <li v-for='item in languages'>{{item}}</li>
   </ul>
</slot>

//父组件,获取子组件传递过来的languages
<cpan>
  <div slot-scope='slot'>
    <span v-for='item in slot.data'>{{item}} -----</span>
   </div>
</cpan>

5、webpack

webpack模块化打包,webpack为了可以正常运行,必须依赖node环境,node环境为了可以正常的执行很多代码,必须其中包含各种依赖的包,npm工具(node packages manager)

6、cli是Command-Line Interface,翻译为命令行界面,俗称脚手架

7、箭头函数使用

也是一种定义函数的方式;

什么时候使用箭头函数:一般一个函数作为另一个函数的参数的时;

箭头函数中的this引用的是最近作用域中的this;

8、history.pushState({},’’,‘home’)、history.replaceState({},’’,‘home’)、history.go()、history.back()、history.forward()

9、router-link中的属性

(1)to属性;

(2)tag:可以指定之后渲染成什么组件,比如上面的代码会被渲染成一个

  • 元素,而不是
  • (3)replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中

    <router-link to='/home' tag='button' replace active-class='active' >首页</router-link>
    <router-link to='/about' tag='button' replace  active-class='active'>关于</router-link>
    
    const router = new VueRouter({
    //配置路由和组件之间的对应关系
    routes,
    mode:'history',
    linkActiveClass:'active'
    })
    export default router
    

    10、动态路由

    {
      path:'/user/:id',
      component:User
    }
    
    <router-link :to="'/user/'+userId"></router-link>
    
    data(){
      return {
       userId:'lisi'
       }
    }
    this.$route.params
    

    11、传递参数的方式

    (1)params的类型:

    配置路由格式:/router/:id

    传递的方式:在path后面跟上对应的值

    传递后形成的路径:/router/123,/router/abc

    //代码进行跳转
    this.$router.push('/user'+this.userId)
    

    (2)query的类型:

    配置路由格式:/router,也就是普通配置

    传递的方式:对象中使用query的key作为传递方式

    传递后形成的路径:/router?id=123,/router?id=abc

    <router-link :to='{path:'/profile',query:{name:'why',age:19}}'></router-link>
    {{$route.query.name}}
    {{$route.query.age}}
    
    //代码进行跳转
    this.$router.push({
    path:'/profile',
    query:{
     name:'lobe',
     age:18
    }
    })
    

    12、导航守卫之全局守卫

    (1)前置钩子

    router.beforeEach((to,from,next)=>{
      //从from跳转到to
      document.title = to.matched[0].meta.title
      next()
    })
    

    (2)后置钩子(hook)

    router.aferEach((to,from)=>{
    
    })
    

    13、keep-alive遇见vue-router

    (1)router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存;

    (2)keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染;

    它里面有两个非常重要的属性:

    include:字符串或者正则表达,只有匹配的组件会被缓存

    exclude:字符串或正则表达式,任何匹配的组件都不会被缓存

    <keep-alive exclude='profile,user'>
      <router-view />
    </keep-alive>
    
    isActive(){
    return  this.$route.path.indexOf(this.path) != -1
    }
    
上一篇:生产环境中的并行度和资源设置


下一篇:厉害了!百度开源的分布式唯一ID生成器UidGenerator分分钟解决时钟回拨问题