開始

• 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>

總結

以上是生活随笔為你收集整理的vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。