美文网首页
一文带你入门Vue之组件化、状态管理、路由

一文带你入门Vue之组件化、状态管理、路由

作者: 浮名虚誉架构师 | 来源:发表于2018-06-11 11:42 被阅读0次

    组件化

    组件为Vue强大的特性之一,可以进行重复利用,封装可重用的代码,让我们代码模块化

    全局注册语法:Vue.component(targetName,options).组件名不能重复,否则会覆盖.如果你使用webpack来构建,即使这个组件你不使用,也会包含在最终的构建中,无疑增加了下载流量

    局部注册格式为:组件名:模板对象.给指定的Vue实例注册组件,多个Vue实例之间是独立的.需要在Vue实例中,添加components属性,进行注册组件

    使用组件,则需要2步:1)引入组件; 2)注册组件

    给组件传递参数,使用prop,你可以在组件上注册的一些自定义 attribute.当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个属性

    自定义事件,子组件发送数据给父组件,子组件可以通过调用内建的 $emit方法并传入事件名称来触发一个事件

    通过插槽分发内容,可以向一个组件传递内容

    Vue路由

     this.$router.push进行编程式路由跳转;<router-link to="/a"> 进行页面按钮式路由跳转; this.$route.params获取路由传递参数;this.$route.query获取路由传递参数;(params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 query则是我们通常看到的url后面的跟在?后面的显示参数.地址栏出现#是hash模式,#以后的不被后台获取;history模式,具有对url历史记录进行修改的功能,需要后台配合处理404的问题.在微信支付,分享中url作为参数传递时#不能满足需求.index中Router对象添加mode: "history".路由的钩子函数首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能)

    Vuex状态管理模式

    vuex 是一个专门为vue.js应用程序开发的状态管理模式,这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分.有默认的五种基本的对象:1.state:存储状态(变量); 2.getters:对数据获取之前的再次编译,可以理解为state的计算属性.我们在组件中使用 $sotre.getters.fun(); 3.mutations:修改状态,并且是同步的.在组件中使用$store.commit('',params).这个和我们组件中的自定义事件类似; 4.actions:异步操作.在组件中使用是$store.dispath(''); 5.modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里就不解释了,用起来和上面的一样

    相关文章

      网友评论

          本文标题:一文带你入门Vue之组件化、状态管理、路由

          本文链接:https://www.haomeiwen.com/subject/twnceftx.html