开始

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 --- 子组件监听点击事件,接收父组件参数.实现对应跳转相关推荐

vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
jquery 监听td点击事件_安卓开发监听点击事件的一种方法
本人是菜鸟一只,学习安卓纯属兴趣.没有真正上过编程课程,所有知识都是在网上获取的.今天分享的是监听点击事件的一个方法,这个方法的好处是代码较简洁. 如图,点击保存时,把上面的数据入库. 实现如下: 在 ...
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
jq监听子元素被点击_jquery怎么监听点击事件？
HTML 事件是发生在 HTML 元素上的事情.那么我们要如何使用jquery来监听事件呢?下面我们就来看一下jquery监听事件的方法. jquery中可以使用click().on()等方法监听事件 ...
Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏
更新: 添加完整示例: test.vue文件 (点击id为content的p,flag的值不会改变;点击页面的其他地方,flag的值会改变) <template><div class ...
vue.使用popstate监听点击浏览器自带返回按钮
我写在了app.vue,大家可以按项目需要写在需要的位置 <script> export default {name: 'App',mounted(){// 监听返回事件,点击系统返回时i ...
Vue项目中监听全屏事件，实现全屏功能和按esc退出全屏（解决全屏踩坑难题）
展示效果: 全屏功能代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
layui table th添加按钮，监听点击事件。
第一步,创建带按钮的表头title. var GSUpdateIniBar = "<label class=\"layui-form-label margin\"& ...

vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转

开始

vue --- 子组件监听点击事件,接收父组件参数.实现对应跳转相关推荐

最新文章

热门文章