父传子、父子组件访问、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）父组件访问子组件使用$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
  }