EventEmitter3 在vue 中的运用

简介

EventEmitter3是一个高性能的事件发射器。它针对各种代码路径进行了微优化，使其成为Node.js和浏览器可用的最快的EventEmitter之一。

其中运用的设计模式就是发布-订阅者模式。在日常开发中运用场景有代替v-model实现自定义组件双向绑定、非父子组件之间的通讯等等。

安装

npm install --save eventemitter3
or
yarn add eventemitter3

import EvemtEmitter3 from 'eventemitter3'

Vue.prototype.$eventBus = new EvemtEmitter3;

parent-c.vue

<template>
  <div>
    Parent
    <sub-c :event="event" />
  </div>
</template>

<script>
// 导入eventemitter3
import EventEmitter3 from 'eventemitter3'

import SubC from './sub-c.vue'
export default {
  components: {
    SubC
  },
  data () {
    return {
      event: null
    };
  },
  computed: {

  },
  created () {
    // 初始化事件对象放在created当中
    this.event = new EventEmitter3;
  },
  mounted () {
    // 初始化激活事件放在mounted,因为子组件通常在created当中注册事件，如果在都在created钩子函数当中会导致事件无法激活
    this.event.emit('testAlert', ' this is Parent emit')

  },
  watch: {

  },
  methods: {
  },
  destroyed () {
    // 移除事件(如果你把event作为一个全局中央事件中心,避免事件冗余和叠加)
    // console.log('移除事件')
    // this.$eventBus.removeListener('eventName')
  }
};
</script>

sub-c.vue

<template>
  <div>
    Sub
  </div>
</template>

<script>
export default {
  props: {
    event: {
      type: Object
    }
  },
  components: {

  },
  data () {
    return {

    };
  },
  computed: {

  },
  created () {
    // 监听事件统一般情况放在created当中
    this.event.on('testAlert', this.test)
  },
  mounted () {
  },
  watch: {

  },
  methods: {
    test (msg) {
      alert('testAlert success' + msg)
    }
  },
};
</script>

推荐这些文章：

Vue子组件调用父组件事件的三种方法

1. 在子组件中通过this.$parent.event来调用父组件的方法，data参数可选

<template>
<div>
<h1>我是父组件</h1>
<child />
</div>
</template>
<script>
import child from '@/components/child';
export default {
components: {
child
},
methods: {
...

Vue系列---【子组件调用父组件的方法】

Vue中子组件调用父组件的方法，三种方法

第一种方法是在子组件中通过this.$parent.event来调用父组件的方法（注意：有时候用到第三方框架，需要多套几层$parent）

父组件：

<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/child';
export default {
components: {
chil...

vue3提供的几个全局组件

Fragment

<template>
<h1>我是APP组件</h1>
<p>没有根标签时 vue会自动再最外层添加一个 Fragment 组件</p>
</template>

<script>

export default {
setup() {
return {
}
}
}
</script>

 Fragment 不会渲染出任何DOM

Teleport

<template>
<h1>我是APP组件&...

vue父组件向子组件传递函数方法

父组件

<template>
<div>
parent
<child :parentHandler="parentHandler" />
</div>
</template>
<script>
import child from "@/components/child";
export default {
components: { child },
data() {
return {};
},
methods: {
parentHandler() {
...

vue父组件中调用子组件的方法

 方案一：通过ref直接调用子组件的方法；

//父组件中

<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="child"/>
</div>
</template>

<script>
import Child from './child';

export default {
methods: {
ha...

Vue项目中如何在父组件中直接调用子组件的方法（2种）：

Vue项目中如何在父组件中直接调用子组件的方法：
 方案一：通过ref直接调用子组件的方法；

//父组件中

<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="child"/>
</div>
</template>

<script>
import Child from './child';

export default {...

vue 父组件 与 子组件 的相互调用

子组件调用父组件的三种方法：
第一种 === 直接在子组件中通过 this.$parent.event 来调用父组件的方法

// 父组件<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
met...

vue快速生成组件模板

 
 
 
 
 
 在最后一个大括号前面加上这段代码就可以了

"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>$0",

" </div>",
"</template>\n",
"<script ...

vue组件内使用sass变量

<style lang="scss" scoped>

@import "~@/styles/variables.scss";
.fixed-header {
background-color: $documentBg;
width: calc(100% - #{$sideBarWidth});
}

</style>

<template>
<div :active-text-color="variables.menuActiveText"></div>
</template>
<script>...

vue3 父子组件间的传值通信

1.父传子
 

// 父组件

<template>
<div>
<div>
<p>{{ count }}</p>
<Son :countFa="count"/>
</div>
</div>
</template>

<script setup>
import { ref } from "vue";
import Son from "./son.vue";
const count = ref("我是父组件的值--...