vue小结

使用vue也好几个月了，今天有空，小结一下。

1.路由router,代码解释，如图1-0所示，router的index.js文件配置静态路由，组件使用router-view标签直接渲染，路由中可在path字段传值，打印this.$router可查看具体，redirect值默认进入一个组件，类似重定向作用。

在做权限管理这块，需要使用动态路由以及传值，根据角色，来判断要显示的路由

1-0

2.组件之间的传值和调用。项目开发中，不可避免会遇到组件之间的传值，这里我分为两种情况；

    2-1：父子组件传值：属性：props，父组件中，在子组件标签上标明要传的值，子组件props接收，详细看图1-1，父组件把变量row传给子组件，子组件props:['row']形式接收就好，页面直接使用，与data数据一样，子组件还可watch传过来的值的变化，在watch钩子函数里，如图1-2

1-1，父组件 1-2子组件

2-2-1 父子相互调用方法；父组件调用子组件的方法，this.$refs.refName.xxx(),refName表示该子组件的ref属性值，后面方法，不明白的同学可以在父组件打印this.$refs,一步步查看具体是什么，了解会更深.

2-2-2：子组件向父组件传值以及调方法：关键字$emit,使用this.$emit('give'，{}),第一个参数为父子组件相约定的关键字，父组件在引入子组件标签中 ：give='parentFun'就好，parentFun为父组件中定义的方法，这样就实现方法调用，如果子组件还需要传递参数，在$emit的的第二个参数可写你要传递的参数，我这里是一个对象，这样你就可以可以传递多个值，同理，在父组件的parentFun(obj){}中    这个形参obj就是子组件传递过来的参数。

2-3:兄弟组件之间的传值；官网上有eventBus的用法，但是个人不推荐，建议vuex，也就是数据仓库store,原理就是一个公共仓库，类似jq的window,变量共享，实现一个变量的变化，多个组件共享，详情可参考官网，我这里不展示demo。

3.v-show和-v-if的区别

    v-show在组件初始化的时候会全部加载出来，然后根据条件的值决定显示哪一个，其他的隐藏,.适合用于经常切换的情况。注：不可写在template标签中。

    v-if每次只会根据当前的值来判断显示哪一个，每次只会渲染一个，适用于不经常切换的情况

4：封装commonJs

    模块化是es6的核心思想，把方法进行归类，一切从简，看图1-3

1-3

单独建立一个js，一个js文件看做一个模块，声明一个对象 ，包含所有的变量，然后在mainJs文件引入这个js，import common from './commom/index.js' ,这样在其他的组件里面就可以直接调用了，this.commom.nowDate(),

这样就调取到了。

ok,第一次总结就到这里了，希望对同学有所帮助！