Vue组件间通信的7种方法(全)_vue 事件通信

53 阅读1分钟

}, components: { child }, methods:{ changeMsg(value){ this.msg=value } } };

// 这是子组件

复制代码


### 2.parent/children


$parent 子组件可以获取到父组件身上的属性以及方法,但是一定要注意,如果说这个组件的父组件不止一个的话 那么容易发生报错


ℎ父组件拿到自己身上的子组件的属性已经方法,如果身上的子组件不止一个的话打印ℎ.children父组件拿到自己身上的子组件的属性已经方法,如果身上的子组件不止一个的话打印this.children的时候会以数组的形式展示出来


### 3.ref


父组件想要拿到子组件身上的数据 还可以给子组件写上ref="名字" 然后在父组件身上 this.$ref.名字就可以拿到子组件 身上的方法已经数据都可以获取到


### 4.v-model


v-model:将数据传递下去的同时 子组件可以修改父组件提供过来的数据(emit方法)



// 这是父组件

// 这是子组件

复制代码


### 5.sync


sync:将数据传递下去的同时 允许子组件可以修改数据



// 父组件

// 子组件

复制代码


### 6.,attrs,listeners


attrs包含的是父组件不被prop所识别的特性(📢:inheritAttrs为true属性才会渲染false时属性不会被渲染)可以通过v−bind="attrs"传给内部的组件 包含父组件啊种−事件监听器通过−="listeners包含父组件啊种v−on事件监听器通过v−on="listeners" 传给内部的足迹爱



复制代码


### 7.provide/inject


provide 提供变量 inject 注入变量


📢:


1. 不论层级多深 只要调用了inject那么久可以注入provide的变量
2. provide提供的数据在父组件中假设发生了变化 默认后辈的组件是不会响应式变化的 但是如果给的数据是this的数据的话 那么就是响应式的书



复制代码


### 7.eventBus


EventBus 本质上就是一个vue实例对象,它可以实现兄弟组件之前的通信,首先在A组件中设置EventBus.��自定义事件名称以及回调函数,然后�组件就是通过��������.on自定义事件名称以及回调函数,然后B组件就是通过eventbus.emit去触发那个自定义事件,将数据传递给A组件


Eventbus的原理实际上就是发布订阅的模式  
 发布订阅模式 :其实就是一种对象间一对多的依赖关系,当一个对象的状态发生改变的时候,所有依赖于它的对象都将得到状态改变的通知


vue中常见的发布订阅就是����emiton


redux中常见的就是subscribe



// eventBus.js import Vue from "vue"; export default new Vue();