当前位置: 代码迷 >> 综合 >> vue组件通信的几种方法
  详细解决方案

vue组件通信的几种方法

热度:94   发布时间:2024-02-10 03:05:22.0

vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法

组件通信的几种方式

1、父子组件通信

2、兄弟组件通信

3、跨多层级组件通信

4、任意组件(vuex)

一、父子组件

1、父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件(单向数据流)

2、还可以通过v-model语法糖(双向数据绑定)

3、$parent,$children对象来访问组件实例中的方法和数据

4、$listeners,$sync(2.3版本以上),$listeners属性会将父组件中(不含.native修饰器)v-on事件监听器传给子组件,子组件可以通过访问$listeners来自定义监听器,.sync属性是个语法糖,可以简单的实现子组件与父组件通信

5、$ref也可进行组件通信,放在组件上可以获取组件实例

 

<!--父组件中-->
<input :value.sync="value"/>
<!--以上写法等同于-->
<input :value="value" @undate:value="v=>value=v"></comp>
<!--子组件中-->
<script>this.$emit('update:value',1)
</script>

二、兄弟组件通信

1、可借助父组件当做通讯的桥梁

2、利用eventBus总线实现,(实际上就是新建一个vue实例,用eventBus.$emit替代this.$emit,一样用v-on监听事件变化)

// main.js
import Vue from 'vue'
import App from './App'export const eventBus = new Vue()new Vue({el: '#app',render: h => h(App)
})

在兄弟组件中导入

<!-- BrotherCard.vue --><script>import { eventBus } from '../main'
</script>

对于这种情况可以通过查找父组件中的子组件实现,也就是this.$parent.$childrren,在$children中可以通过组件name查询到需要的组件实例,然后进行通信。$children返回的是一个组件集合

1)$refs

首先,给子组件做标记,demo:

<firstchild ref="one"></firstchild>

然后再父子间中,通过this.$refs.one就可以访问到这个子组件了,包括访问子组件的data里面的数据,调用他的函数

三、跨多层级组件通信

provide / inject(常见得到就是无感刷新)

// 父组件 A
export default {provide: {data: 1}
}
// 子组件 B
export default {inject: ['data'],mounted() {// 无论跨几层都能获得父组件的 data 属性console.log(this.data) // => 1}
}

四、任意组件

使用vuex或者eventBus

全局数据管理大家都很熟悉,就不多累赘了

 

 

  相关解决方案