Vue 组件通信方式
组件化开发中，组件之间的数据传递是最常见的需求。本文梳理 6 种通信方式及其适用场景。
一、props / $emit（父子通信）
- 1.1 父组件通过 props 向子组件传值
- 1.2 子组件通过 $emit 触发父组件事件
- 1.3
.sync修饰符的语法糖
二、$refs / $parent / $children
- 2.1
$refs获取子组件实例 - 2.2
$parent访问父组件 - 2.3 局限性——耦合度高
三、EventBus（兄弟组件通信）
- 3.1 创建一个空的 Vue 实例作为事件中心
- 3.2
$on监听事件、$emit触发事件 - 3.3
$off销毁监听——防止内存泄漏
四、Vuex（全局状态管理）
- 4.1 什么时候需要 Vuex
- 4.2 State / Getter / Mutation / Action
- 4.3 单向数据流的理解
五、$attrs / $listeners
- 5.1 跨层级传递属性
- 5.2 避免中间组件逐层传递
六、provide / inject
- 6.1 祖先组件 provide 数据
- 6.2 后代组件 inject 使用
- 6.3 适用场景与局限性
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 谜思录！
相关推荐
2017-04-29
Axios 封装与接口管理
前后端分离后，HTTP 请求的管理变得至关重要。一个好的 Axios 封装能显著提升开发效率和代码可维护性。 一、Axios 基础 1.1 安装与引入 1.2 GET / POST / PUT / DELETE 请求 1.3 请求配置项——headers、params、timeout 1.4 响应数据结构 二、创建 Axios 实例 2.1 axios.create() 创建独立实例 2.2 配置 baseURL——区分环境 2.3 设置默认 timeout 和 headers 三、请求/响应拦截器 3.1 请求拦截——自动添加 Token...
2016-05-15
Vue.js 快速上手
从 jQuery 到 Vue，前端开发的思维方式发生了根本变化。本文用最简短的篇幅带你理解 Vue 的核心概念。 一、MVVM 模式简介 1.1 jQuery 时代的 DOM 操作 1.2 数据驱动的思想——数据变了，视图自动更新 1.3 Vue 的 MVVM 三层——Model / View / ViewModel 二、创建第一个 Vue 实例 2.1 CDN 引入 Vue.js 2.2 new Vue({ el, data, methods }) 基本结构 2.3 {{ }} 插值表达式 2.4 v...
2016-11-12
Vue Router 路由管理
单页应用（SPA）的核心是前端路由。Vue Router 让页面切换变得像后端路由一样自然。 一、SPA 与前端路由 1.1 传统多页应用 vs 单页应用 1.2 Hash 模式与 History 模式的区别 1.3 #/xxx vs /xxx 的原理 二、基本配置 2.1 安装与引入 Vue Router 2.2 定义路由表——path + component 2.3 <router-view> 渲染出口 2.4 <router-link> 导航链接 三、动态路由 3.1 /user/:id 动态路径参数 3.2 $route.params 获取参数 3...
2017-01-28
Vuex 状态管理入门
当多个组件共享同一份数据时，props 和 EventBus 开始力不从心。Vuex 提供了集中式的状态管理方案。 一、什么是状态管理 1.1 组件内部状态 vs 应用级状态 1.2 多组件共享数据的痛点 1.3 Vuex 的解决思路——单一数据源 二、核心概念 2.1 State——单一状态树 2.2 Getter——计算属性 2.3 Mutation——同步修改 State 2.4 Action——异步操作后提交 Mutation 2.5 Module——模块化拆分 三、一个购物车示例 3.1 定义 State——商品列表、购物车 3.2 Mutation——添加/...