码迷,mamicode.com
首页 > 其他好文 > 详细

vue框架-学习记录

时间:2017-12-25 11:26:25      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:console   vue   data   总结   技术   改变   通信   记录   问题:   

前段时间在做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框架-学习记录

标签:console   vue   data   总结   技术   改变   通信   记录   问题:   

原文地址:http://www.cnblogs.com/JM-xiu/p/8107988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!