Vue 이벤트 버스가 폐지되나요?

vue3는 보안이 취약하여 글로벌 이벤트 버스를 취소했습니다. 글로벌 이벤트 버스는 글로벌 모든 구성 요소 통신 기술입니다. 즉, 모든 구성 요소 간의 통신이 가능합니다. vue3에서 글로벌 이벤트 버스를 사용하려면 타사 라이브러리 mitt 또는tiny-emitter를 도입해야 합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue3는 보안 수준이 낮아 글로벌 이벤트 버스를 취소했습니다.

vue의 글로벌 이벤트 버스

글로벌 이벤트 버스는 글로벌 임의 구성 요소 통신 기술입니다.

이름에서 알 수 있듯이 모든 구성 요소 간의 통신이 가능합니다.

모든 구성 요소에 액세스할 수 있는 꼭두각시를 통해 통신합니다. vue$bus

在vue2中

我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus

beforeCreate() {
	Vue.prototype.$bus = this
}

记得把钩子写在 挂载之前即可。

使用时：

• 在需要接收数据的组件中使用 mounted钩子绑定事件监听

mounted() {
  this.$bus.$on('hello',(data) => {
    console.log(data);
  })
},

• 在需要发送数据的组件中需要发送的操作中触发该方法即可

methods: {
  sendStudentName(){
    this.$bus.$emit('hello',this.name)
  }
},

• 还没完，如果组件销毁，记得解绑事件，在哪绑定就在哪解绑，使用beforeDestroy钩子

beforeDestroy() {
  this.$bus.$off('hello')
},

在vue3

在vue3中，取消了全局事件总线，如果想要使用，我们需要引入第三方库 mitt或tiny-emitter

1、安装mitt库

npm i mitt -s

2、在根目录封装一个 js 文件，以便组件中导入使用

文件起名最好见名知义 例如 eventBus.js

内容：

//导入
import mitt from 'mitt';
 //定义,定义也最好见名知义
const emitter = mitt();
 //暴露
export default emitter;

3、使用

1）相互通信的组件均需要导入js

import emitter from '../../eventBus'

2） 接收数据的组件 在setup（）

vue2

항목 파일 mian.js에서 직접 beforecreated
라이프 사이클 후크를 사용하여 $bus를 직접 생성할 수 있습니다. code>

setup(){
  emitter.on('event',(info) => {
    ...
  })
  return{}
}

마운트하기 전에 후크를 작성하는 것을 잊지 마세요.

사용 시:

마운트된 후크를 사용하여 데이터를 수신해야 하는 구성 요소에서 이벤트 모니터링을 바인딩합니다

setup(){
	function send(info) {
		emitter.emit('event',info)
	)
	return{}
}

데이터를 전송해야 하는 구성 요소에서 전송해야 하는 작업에서 이 메서드를 트리거하기만 하면 됩니다

li>

onBeforeUnmount(()=>{
	emitter.off("event", onEvent);
})

• 🎜아직 끝나지 않았습니다. 구성 요소가 삭제되면 이벤트 바인딩을 해제하고 바인딩된 위치에서 바인딩을 해제해야 합니다. vue3에서 beforeDestroy code>후크 🎜

rrreee🎜🎜🎜를 사용하세요 🎜🎜🎜vue3에서 글로벌 이벤트 버스가 취소되었습니다. 이를 사용하려면 타사 라이브러리 mitt 또는 tiny-emitter🎜를 도입해야 합니다. 🎜1. 미트 라이브러리를 설치하세요🎜rrreee🎜2. 디렉토리는 js 파일을 캡슐화하므로 파일 이름을 eventBus로 명확하게 지정하는 것이 가장 좋습니다. js🎜🎜Content: 🎜rrreee🎜3. 사용 🎜🎜1) 서로 통신하는 구성 요소 둘 다 js🎜rrreee를 가져와야 합니다. 2) 데이터를 받는 구성 요소는 의 이벤트 리스너에 바인딩됩니다. >setup()🎜rrreee🎜여기 화살표 함수도 일반 함수로 대체 가능🎜🎜3) 데이터 보내기 컴포넌트가 트리거될 때 데이터를 전송할 수 있습니다🎜rrreee🎜4) 컴포넌트가 소멸되기 전에, 이벤트 바인딩을 해제하고,🎜rrreee🎜일반 함수를 사용한다면 두 번째 매개변수 위치에 함수를 넣어주세요. 화살표 함수라면 작성할 필요가 없습니다. 위와 동일 onEvent🎜🎜[관련 추천: 🎜vuejs 비디오 튜토리얼🎜, 🎜웹 프론트엔드 개발🎜]🎜

위 내용은 Vue 이벤트 버스가 폐지되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!