前段时间在做vue项目时,遇到挺多问题,想简单总结一下:
1、关于父组件,子组件的通信
网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的:
【1】父组件—子组件
也就是“属性向下走”,即在父组件中通过标签属性传值,子组件利用‘props’接收后,在子组件中便可使用;
【2】子组件—父组件
子组件中可以用“事件向上走”的方式传递参数到父组件,
即:this.$emit(‘ myevent’,参数 )
父组件再以一个方法接收子组件传递的参数
GetData(data){
this.data = data
}
【小结】:最主要的是记住:属性往下走,事件向上走
2、Vue的路由问题
看了网上的很多帖子,简单点说:
【1】路由跳转可以通过<router-link :to=’’></router-link>,也可以通过“this.$router.push(‘’)”,
当然,都是可以加参数的,加参数也很简单,
第一步:在main.js中的对应路由处加上相应地参数名;
第二步:在页面文件中的路径后面直接跟上参数就可以了;
第三步:调用,直接“this.$route.params.参数名”【这里这样用是因为项目中自己用的是router.push()的方式跳转】
【以上是最简单的路由跳转方式】
【问题:“路由监听”】还遇到一个高级一点的,就是在子组件中通过不同的参数变换不断请求刷新父组件,这个查阅了相关的网页,也看了一些例子,一般情况下,都是可以用监听路由解决的,也就是:
第一步:子组件中正常跳转的this.$router.push(‘’)写好;
第二步:在父组件中监听路由的变化:
Watch:{
‘$router’(to, from) {
// 对路由变化作出响应...
//这里可以重新请求数据
}
}
//当参数发生改变,通过watch监听到地址栏的变化,然后再重新请求一遍数据。
除了watch监听路由变化以外,路由中的组件钩子函数beforeRouteUpdate也可以,
beforeRouteUpdate (to, from, next){
console.log(‘component beforeRouteUpdate‘);
next();
}
关于路由这方面的钩子函数,网上有很多介绍,想要深入理解,可以去看看
https://segmentfault.com/a/1190000008879966
前端新手,欢迎指教!