序言

笔者遇到了一个比较特殊的设计要求，从 Vue 路由传递某个参数给某个组件，然后在使用这个父组件将这个参数传递给子组件，看似挺复杂的，其实实现后，还是挺简单的。

可以说下方的参考链接好坏掺杂，本文是笔者提取了参考链接内的精华部分所写。

实现方法

Vue 路由的配置文件：

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [{
      path: '/test',
      component: testpage,
      props:{ testindex: '0'} 
  },
  ]
});

父组件配置：

<template>
<testchild :getindex="testindex">
 </testchild >
</template>
<script>
import testchild from "../components/testchild";

export default {
  name: 'testfather',
  components: { testchild },
  props: ['testindex'],
  data() {
    return {
    }
  },
}
</script>

子组件配置：

<template>
<div>
<p>  ---------------  测试 ---------------  </p>
<p> 这是传递的参数使用方法作为中间件 {{ curractive }} </p>
<p>  这是传递的参数 {{ getindex }} </p>
</div>
</template>
<script>

export default {
  name: 'testchild',
  props: {
    getindex: {
      type: String,
      default: '-1'
    },
  },
  data() {
    return {
    }
  },
   computed:{
    curractive:function (){
      console.log("test 用这个computed 的方法也是可以的，效果一样", this.getindex)
      return this.getindex
    }
  },
}
</script>

个人理解

props：该参数可以说 数组类型，比如[a, b, c ] ，也可以说对象类型，比如{a:{ type: String, default: '' } }的，但如果是在使用对象类型的数据格式限制时，请注意传递的参数格式类型是否对的上。

参考链接

1. vue中 关于$emit的用法

2. Vue中父子组件如何传值

3. ⑩ Vue父组件向子组件传值

4. Vue路由组件传参

5. Vue中父组件向子组件传递数据的几种方法

6. 超详细的Vue渲染原理讲解