关于Vue中props传参你必须了解的内容

关于Vue中props传参你必须了解的内容 父子组件 场景一 子组件将参数仅仅用于展示或计算（直接在模板中使用、在计算属性中使用）值会随着父组件的值改变而改变 场景二 子组件将参数赋值给本地data参数数据类型 基本数据类型：值不会随着父组件的值改变而改变，原因是data中的赋值只在生命周期钩子created之前执行一次引用数据类型：值会随着父组件的值改变而改变，原因是引用数据类型赋值给的是地址，两个引用的是同一个地址 如果有监听父组件值的需求，可以在子组件利用watch监控props 如果在父组件created中修改数据，子组件可能监听不到props，因为在父组件created之后子组件$watch才开始被调用（对父子生命周期不了解的可以去看一下） 路由组件传参

在组件中使用$route接受参数，会使组件与路由紧密耦合，vue提供了一种将props传递给路由组件的形式（利用props接受参数），提高组件的复用。

props为true: 此时可以在Context组件中定义对应的props: [ ‘id’ ]来接受 params：{ id：111 }

{
    path: '/context:id',
    name: 'context',
    component: Context,
    props: true
  }

props为对象: 此时可以在Context组件中定义对应的props: [ ‘id’ ]来接受 { id：11 }

{
    path: '/context',
    name: 'context',
    component: Context,
    props: { id: 11 }
  }

props为函数：此时可以在Context组件中定义对应的props: [ ‘query’ ]来接受 { query：route.query.id }

{
    path: '/context',
    name: 'context',
    component: Context,
    props: route => ({ query: route.query.id})
  }