vue相关,组件通信(兄弟,父子,),vuex,计算属性watch监听,路由传参

一直想着写点小栗子,能把vue常用的一些东西都带出来,终于付诸实践,写的是极其丑陋,丑就丑吧,有句话说的好,修于内而张于外,内还没有修好,就先不张了,好的不闲扯了。
项目已经贴在我的github(gayhub):
https://github.com/wjaill/mostDome-for-vue.git 只需下载安装依赖即可

ok 来看看吧

  1. 组件传参,父子组件的话就很简单了 父组件传递,子组件props接收即可

  2. 子组件给父组件传递 贴出关键代码

//这是子组件方法
childClick () {
     // childByValue是在父组件on监听的方法
      // 第二个参数this.childValue是需要传的值
      this.$emit('childByValue', this.childValue)
  }
  //这是父组件方法
  childByValue(childValue) {
         // childValue就是子组件传过来的值
         this.value = childValue
  }

原理:使用this.$emit向上传值

3.兄弟组件
说一下bus总线吧 就是这么点东西
在这里插入图片描述
兄弟组件都需要引入
在这里插入图片描述
在这里插入图片描述
我觉得没什么东西,一眼就看懂 ok

4.计算属性or watch
都是为了实现监听 对于任何复杂逻辑,你都应当使用计算属性
vue呢 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动 watch
他们都可以实现同一种效果,但是场景不同
计算属性,可以监听,也可以计算值
watch 监听定义的变量 当你定义的变量的值发生变化,触发相应回调
5.vuex
重头戏来了,这里的例子只是简单写出流程,为的是了解一下流程
偷偷盗几张图,
在这里插入图片描述

摘自官网 很明白的流程 我会尽量简明扼要

store 唯一数据源
state 状态
getter 依据状态派生一些状态,可以做一些计算等
mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation(同步)
action 记住两点 Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作。
改变状态可以使用官方的API 或者map 辅助函数

一般来说
1.生成store,设置state
2.在根实例中注入store
3.组件通过计算属性或者mapState来使用状态
4.用户产生操作,调用actions的方法,然后进行异步动作
5.异步动作之后,通过commit调用mutations的方法
6.mutations方法被调用后,更改state
7.state中的数据更新之后,计算属性重新执行来更改在页面中使用的状态
8.组件状态被更改…创建新的虚拟dom…
9.组件的模板更新之后重新渲染在dom中

  1. 路由传参
    1 路由配置
    在这里插入图片描述
    路由传递就ok
    2.query
this.$router.push({
     path: '/detail',
     query: {
           id: id
     }
})

子组件this.$route.query.id获取值

就这样啦。。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值