VUE-组件传参

为解决在组件中使用$router产生的高度耦合，故使用组件传参。

1、布尔模式传参（适用于动态路由）

　　组件：

<script>
export default {
  // props 父 -> 子
  props:{
    name:{
      type:String,
      // default 默认
      default:'xiao'
    }
  }
}
</script>

　　路由（将props设置为true，route将会被设置为组件属性）：

{
    path:'/argu/:name',
    name:'argu',
    component:() => import('@/views/argu.vue'),
    props:true
  },

2、对象模式

　　组件：

export default {
  props:{
    food:{
      type:String,
      default:'apple'
    }
  }
}
</script>

　　路由：

{
    path: '/about',
    name:'about',
    component: () => import( '@/views/About.vue'),
    props:{
      food:'banana'
    }
  },

3、函数模式

　　组件：

props:{
    food:{
      type:String,
      default:'apple'
    }
  },

　　路由：

{
    path: '/',
    alias:'/home_page',
    name:'home',
    component: Home,
    props:route =>({
      food:route.query.food
    })
  },