周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

vue组件通信的方式

2022-08-09 70点热度 0人点赞 0条评论

渐进式、组件化、轻量级是vue的特点。可以实现组件的复用,组件之间可以互相嵌套

因为组件实例的作用域相互独立,所以不同组件之间的数据难以实现共享,所以就组件间的数据通信做以下分析:

一、组件之间的关系

  • 父子组件
  • 兄弟组件
  • 隔代组件

二、通信方法

1、props/$emit

这种方法一般使用与父子组件之间的通信,父组件通过props向子组件传值,子组件通过$emit向父组件发送数据

父组件:

<template>
  <div class="father">
    我是父组件,我有一个值{{age}}<br />
    我获取到了子组件的值{{sonAge}}
    <Son :fatherAge="age" @sendAge="getSonAge"></Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'name',
  data() {
    return {
      age: 48,  // 父组件的值
      sonAge: 0 // 定义值存储子组件获取的值
    }
  },
  methods: {
    // 获取子组件的值并储存
    getSonAge(e) {
      this.sonAge = e
    }
  },
  components: {
    Son
  }
}
</script>

<style lang="less" scoped>
.father {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 600px;
  height: 300px;
  font-size: 20px;
  background-color: #ccc;
}
</style>

子组件:

<template>
  <div class="son">
    我是子组件,我有一个值{{age}}
    <div>我拿到的父组件的值{{fatherAge}}</div>
  </div>
</template>

<script>
export default {
  name: 'Son',
  props: ['fatherAge'],   // props接收父组件传递的值
  data() {
    return {
      age: 15
    }
  },
  mounted() {
    // emit发送事件,通过参数传递子组件的数值
    this.emit('sendAge', this.age)
  }
}
</script>

<style lang="less" scoped>
.son {
  width: 400px;
  height: 150px;
  text-align: center;
  font-size: 16px;
  background-color: #efefef;
}
span {
  margin-bottom: 10px;
}
</style>

结果:

image-20220809150731696

2、事件总线(emit/on)

这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧实现任何组件间的通信,包括父子、兄弟、跨级。

安装全局事件总线

// 向Vue原型上添加实例,能够被其他vc/vm访问
new Vue({
  el: '#app',
  render: h=> h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
  }
})

发送事件传递数据

<template>

</template>

<script>
export default {
  methods:{
        this.bus.emit('sendAge',13)
    }
}
</script>

<style lang="less" scoped>
</style>

监听事件接收数据


<template>
</template>

<script>
export default {
  mounted(){
    this.bus.on('sendAge',(data)=>{
      console.log('我收到了数据',data)
    })
    }
}
</script>

<style lang="less" scoped>
</style>

移除事件监听

this.bus.off('sendAge')
3、vuex组件通信

Vuex 是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

image-20220809152241000

全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action,但Action也是无法直接修改State的,还是需要通过Mutation来修改State的数据。最后,根据State的变化,渲染到视图上。

链接待定...

4、provide/inject

vue2.2新增的API,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

// 祖先.vue
export default {
 provide: {
   name: 'ancestor'
 }
}
/**************************************/
// 子孙.vue
export default {
 inject: ['name'],
 mounted () {
   console.log(this.name);  // ancestor
 }
}

祖先组件提供了一个name属性,他的所有后代组件都可以通过inject访问到这个值

provide/inject因为这个API不是响应式的,主要用于高阶插件和组件库,要实现响应式需要挂载很多没必要的东西

5、parent/children

可以通过parent/children直接访问到组件实例,就可以使用该组件的方法和数据

增加了对象之间的耦合度,大型项目不建议使用

6、第三方库mitt

Vue3.0中取消emit的变动,使得没法再按vue2事件总线的方式使用了。官方建议使用第三方库mitt。

安装

npm install --save mitt

创建一个js文件

import Mitt from 'mitt'

const eventHub = new Mitt();

eventHub.on = eventHub.on;
eventHub.off = eventHub.off;
eventHub.$emit = eventHub.emit;

export default eventHub;

注册到vue实例

import {createApp} from 'vue'
import App from "./App.vue"
import eventHub from '@/plugins/eventHub.js';

const app = createApp(App);

// 配置全局事件总线
app.config.globalProperties.eventHub = eventHub;

app.mount('#app');

监听

import { getCurrentInstance, onMounted } from 'vue';

export default {
  name: 'YourComponent',
  setup() {
    const { eventHub } = getCurrentInstance().proxy;
    eventHub.on('event-name', eventHandler);

    onBeforeUnmount(() => {
      eventHub.off('event-name', eventHandler);
    });
  },
};

派发

import { getCurrentInstance, onMounted } from 'vue';

export default {
  name: '',
  setup() {
    const { eventHub } = getCurrentInstance().proxy;

    onMounted(() => {
      eventHub.$emit('event-name', 'some params');
    });
  },
};
标签: vue 组件通信
最后更新:2022-08-09

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 一、组件之间的关系
  • 二、通信方法
      • 1、props/$emit
      • 2、事件总线(emit/on)
      • 3、vuex组件通信
      • 4、provide/inject
      • 5、parent/children
      • 6、第三方库mitt

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号