详解vue2.0组件通信各种情况总结与实例分析

Vue 2018-12-31

Props在vue组件中各种角色总结

在Vue中组件是实现模块化开发的主要内容，而组件的通信更是vue数据驱动的灵魂，现就四种主要情况总结如下：

使用props传递数据---组件内部

注意命名规定：仅在html内使用my-message
//js

动态props通信---组件与根节点(父子之间)

对比分析：

例子1:

//组件内部数据传递，对应字面量语法:传递了一个字符串"1"

例子2:

//组件与根节点数据传递，对应动态语法:传递实际的数字:js表达式

单向数据流动特点：父组件属性变化时将传导给子组件，反之不可

两种改变prop情况

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

子组件索引

尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

数据反传---自定义事件

自定义事件的根基在于每个vue实例都实现了事件接口（Event interface）

Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件

  1. 监听：$on(eventName)
  2. 触发：$emit(eventName)
Look at the parent's data: {{t}} & the child's data: {{childWords}}

兄弟间通信---简单场景用bus，复杂场景用vuex

总结：Vue中关于组件间及组件与根节点间通信都可以人为是父子兄弟间的通信，另外父子关系是相对的即与上下文有关（比如A组件的父组件可能是B组件的子组件）；上述四个例子分别演示了不同组件通信的机制。

澄清了上述问题不难理这句话：

编译作用域---父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。分发内容是在父组件作用域内编译

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

vue2.0组件通信组件间通信

相关文章

Vuex- Action的 { commit }的写法
https://segmentfault.com/a/1190000022018995 https://www....
ES6模块之export和import详解
ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的...
Vue知识点汇总（含Vue3）
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
npm init vite@latest vue3study --template vue
D:\Temp>npm init vite@latest vue3study --temp...
Vue 中使用消息总线让两个滚动条同步滚动
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
Vue + lodop 静默打印
文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简...