vue框架-学习记录

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue框架-学习记录相关的知识,希望对你有一定的参考价值。

前段时间在做vue项目时,遇到挺多问题,想简单总结一下:

1、关于父组件,子组件的通信

网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的:
1】父组件—子组件

也就是“属性向下走”,即在父组件中通过标签属性传值,子组件利用‘props’接收后,在子组件中便可使用;

2】子组件—父组件

子组件中可以用“事件向上走”的方式传递参数到父组件,

即:this.$emit(‘ myevent’,参数 )

父组件再以一个方法接收子组件传递的参数

GetDatadata{

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

 前端新手,欢迎指教!

 


以上是关于vue框架-学习记录的主要内容,如果未能解决你的问题,请参考以下文章

前端框架Vue学习的心得记录(过渡&动画)

前端框架Vue学习的心得记录(可复用性&组合)

vue框架-学习记录

Vue.js 学习记录

Vue 初级入门学习记录二

Vue项目搭建记录