开始

• vue中子组件这一块,有点麻烦。不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫
• 下面假设:
• 路由配置文件为:router.js
• 父组件为 parent.vue , 路径为 ./parent.vue
• 子组件1为 child1.vue, 路径为 ./child1.vue
• 子组件2为 child2.vue, 路径为 ./child2.vue
• 父组件中,使用child1.vue循环生成了一堆卡片,点击每个卡片,跳到对应的卡片详情中去.
• 从这里开始

// parent.vue
<template>
<div class="row"><div class="col" v-for="(item, index) in whatever" :key="index"><child1 :id = "item.id"></child1></div>
</div>
</template><script>
import child1 from './child1.vue'export default{data() {whaterver: [....]},components:{child1}
}
</script>

• 子组件

// child1
<template><div @click="goTochild2"> 子组件1 </div>
</template>
<script>
export default{props:['id'],methods:{goTochild2(){this.$router.push({ name:child2 }, query{ id: this.id })}}
}
</script>

• 上面this.$router.push({ name:child2 }) 表示跳转到name为child2的路由
• 查找路由配置文件

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import child2 from './child2.vue'Vue.use(Router)export default new Router({routes:[{path:'/child2',name:'child2',component: child2}]
})

• 有了路由跳转的文件,当点击子组件的时候,根据this.$router.push({ name:‘child2’ }),就会跳转到对应的组件,同时url 也会变为 ip:port + ‘/child2’
• 下面是child2获取传递过来的id,然后利用id做事情

<template><div>child2 --- {{ id }}</div>
</template><script>
data () {return {id: ''}
},
created(){this.id = this.$route.query.id
}
</script>