组件的传参

父传子 props
子传父 事件$emit
引用父组件$parent
引用子组件 $children/$refs
引用根组件 $root 最大组件

事件bus传参

(跨层级访问数据)

(非父子关系)

  1. 创建bus.js

    import Vue from 'vue'
var bus = new Vue();
export default bus;

  2. 在要发送数据的组件中导入bus并使用 bus.$emit

  3. 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)

注意：任意组件只要导入bus 就可以随意的 发送与监听数据

bus.$on(eventname,callback) 监听事件 bus.$emit(eventname,data)发送事件 bus.$off(eventname)移除事件

provider和inject

依赖注入
跨层级访问(只读)

inject 接收父辈组件提供的数据

Vuex全局数据共享

VueX

解释

Vuex 实现数据的全局共享，响应式更新

state

存放状态

$store.state.xxx访问

mutations

改变状态的唯一方法
SET_SCORE(state,data){}

$store.commit("xxx",data)

actions

异步操作数据的方式

  //在actions中访问mutations
  context.commit(“SET_SCORE”,data)
}

$store.dispatch("xxx",data)

getters

从现有的状态计算出新的数据

   return state.user.score/100
}

$store.getters.xxx

module子模块

把登录功能放在store/moudules/user.js actions中

loginView.vue页面执行登录

实现store/modules/user.js 实现注销

实现 登录成功提示，登录失败提示

为什么要把登录转换到vuex中

  1. 登录后成功的数可以全局共享

  2. 为了重复利用登录功能可能不止在登录页面

    1. 首页点击弹框登录

    2. 购物车 跳转前，弹框登录

    3. 登录位置会有很多

      如果写在Vuex只需要在登录地方
$store.dispatch("login",data) 方法就可以

为什么要写api/login.js (定义api呢)

重复利用
登录的api也会调用多次

方便集中管理

所有的请求地址与请求方式 api文件中
改请求方式与参数可以直接修改 api内容就可以，不用具体进入到某个组件

provide提供数据

所有子孙都可以通过inject注入数据

​ # Vue

组件的传参

父传子 props
子传父 事件$emit
引用父组件$parent
引用子组件 $children/$refs
引用根组件 $root 最大组件

事件bus传参

(跨层级访问数据)

(非父子关系)

  1. 创建bus.js

    import Vue from 'vue'
var bus = new Vue();
export default bus;

  2. 在要发送数据的组件中导入bus并使用 bus.$emit

  3. 在有接收数据的组件中导入bus 并使用 bus.$on (注意this)

注意：任意组件只要导入bus 就可以随意的 发送与监听数据

bus.$on(eventname,callback) 监听事件 bus.$emit(eventname,data)发送事件 bus.$off(eventname)移除事件

provider和inject

依赖注入
跨层级访问(只读)

inject 接收父辈组件提供的数据

Vuex全局数据共享

VueX

解释

Vuex 实现数据的全局共享，响应式更新

state

存放状态

$store.state.xxx访问

mutations

改变状态的唯一方法
SET_SCORE(state,data){}

$store.commit("xxx",data)

actions

异步操作数据的方式

  //在actions中访问mutations
  context.commit(“SET_SCORE”,data)
}

$store.dispatch("xxx",data)

getters

从现有的状态计算出新的数据

   return state.user.score/100
}

$store.getters.xxx

module子模块

把登录功能放在store/moudules/user.js actions中

loginView.vue页面执行登录

实现store/modules/user.js 实现注销

实现 登录成功提示，登录失败提示

为什么要把登录转换到vuex中

  1. 登录后成功的数可以全局共享

  2. 为了重复利用登录功能可能不止在登录页面

    1. 首页点击弹框登录

    2. 购物车 跳转前，弹框登录

    3. 登录位置会有很多

      如果写在Vuex只需要在登录地方
$store.dispatch("login",data) 方法就可以

为什么要写api/login.js (定义api呢)

重复利用
登录的api也会调用多次

方便集中管理

所有的请求地址与请求方式 api文件中
改请求方式与参数可以直接修改 api内容就可以，不用具体进入到某个组件

provide提供数据

所有子孙都可以通过inject注入数据

​

原文地址：http://www.cnblogs.com/aureazjl/p/16810957.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性