您的位置: 首页 > 文章 > VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值

VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值

分类: 文章 • 2023-03-14 08:37:27

VUE组件之间的通信

父组件=>子组件（ props）

①定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{ }的形式
VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值
②定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。

VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值
假如传的是动态参数比如 input输入的内容 v-model的形式
注意：传递的参数名称支持驼峰命名，下图描述不正确（1.0是不支持的）

重点

父子组件传值，数据是异步请求，有可能数据渲染时报错
原因：异步请求时，数据还没有获取到但是此时已经渲染节点了

解决方案：可以在父组件需要传递数据的节点加上 v-if = false，异步请求获取数据后，v-if = true

子组件=>父组件（emit事件）

VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值

不同组件之间传值

通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex）
①定义一个新的vue实例专门用于传递数据，并导出
VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值

②定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件
VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值

③接收传递过来的数据
注意：enentBus是一个另一个新的Vue实例，区分两个this所代表得vue实例
VUE组件之间的通信父组件=＞子组件（ props）子组件=＞父组件（emit事件）不同组件之间传值