vue框架-学习记录

前段时间在做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

前端新手，欢迎指教！