vue의 자체 구현 발송 및 방송 (dispatch와broadcast)

해결해야 할 문제

주요 구성 요소 간의 크로스 레벨 통신

왜 디스패치와 브로드캐스트를 스스로 실현합니까?

독립 구성 요소 개발이나 라이브러리를 할 때 제3자 라이브러리에 의존하지 않는 것이 가장 좋기 때문이다

왜 provide와 inject를 사용하지 않습니까?

그 사용 장면은 주로 하위 구성 요소가 상급 구성 요소를 얻는 상태이기 때문에 크로스 구성 요소 간에 주입에 의존하는 관계를 주동적으로 제공한다.
그리고 두 가지 장면이 있는데 그것이 잘 해결되지 않는다.
상위 구성 요소는 하위 구성 요소에 데이터를 전달합니다.
서브어셈블리는 상위 어셈블리(계층 간 지원)에 데이터를 전달합니다.
코드는 다음과 같습니다.
emitter.js

function broadcast(componentName, eventName, params) {
 this.$children.forEach(child => {
  const name = child.$options.name;

  if (name === componentName) {
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   // todo   params  ，  undefined
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}
export default {
 methods: {
  dispatch(componentName, eventName, params) {
   let parent = this.$parent || this.$root;
   let name = parent.$options.name;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.name;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  },
  broadcast(componentName, eventName, params) {
   broadcast.call(this, componentName, eventName, params);
  }
 }
};

parent.vue

<template>
 <div>
  <h1> </h1>
  <button @click="handleClick"> </button> <child />
 </div>
</template>
<script>
import Emitter from "@/mixins/emitter.js";
import Child from "./child";
export default {
 name: "componentA",
 mixins: [Emitter],
 created() {
  this.$on("child-to-p", this.handleChild);
 },
 methods: {
  handleClick() {
   this.broadcast("componentB", "on-message", "Hello Vue.js");
  },
  handleChild(val) {
   alert(val);
  }
 },
 components: {
  Child
 }
};
</script>

child.vue

<template>
 <div> </div>
</template>
<script>
import Emitter from "@/mixins/emitter.js";
export default {
 name: "componentB",
 mixins: [Emitter],
 created() {
  this.$on("on-message", this.showMessage);
  this.dispatch("componentA", "child-to-p", "hello parent");
 },
 methods: {
  showMessage(text) {
   window.alert(text);
  }
 }
};
</script>

이렇게 하면 크로스 구성 요소의 사용자 정의 통신을 실현할 수 있지만, 그 중 하나를 주의해야 한다. 구독은 발표보다 먼저 해야 한다. 즉, 먼저 on이 있고emit가 있어야 한다.

상위 어셈블리 렌더링 순서, 인스턴스 생성 순서

하위 구성 요소가 부모 구성 요소 앞에서 렌더링되기 때문에 하위 그룹의 mounted 배달 이벤트를 보낼 때 부모 구성 요소의 mounte에서 감청할 수 없습니다.
부모 구성 요소의create는 하위 구성 요소보다 앞서기 때문에 부모 구성 요소의create는
vue의 자체 구현 배포와 방송(dispatch와broadcast)에 대한 상세한 설명은 여기 있습니다. 더 많은 vue 배포와 방송 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!