Vue에서 메시지 구독 및 게시 사용법을 간략하게 분석한 기사

메시지 구독과 게시란 무엇인가요? 사용하는 방법? 다음 글에서는 Vue에서 메시지 구독 및 게시를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

1. 메시지 구독 및 게시란 무엇입니까

메시지 구독 및 게시는 구성 요소 간 통신 방법이며 모든 구성 요소 간 통신에 적합합니다. 구성 요소 간 통신을 더 잘 구현할 수 있습니다(메시지 구독 및 게시는 신문 배달 소년과 같습니다. 예를 들어 꼬마 A가 신문을 구독한 후 자신의 정보를 신문사에 남기고, 신문 배달 소년이 누른 정보는 다음과 같습니다. a가 있는 곳을 찾아서 신문을 주었습니다.)

2. pubsub 사용 방법

1. 먼저 pubsub를 설치하고 vscode를 열고 → 터미널을 열고 설치 명령을 입력해야 합니다. cmd에 설치) [관련 권장 사항: vuejs 비디오 튜토리얼, web front-end development]

npm i pubsub-js

2. 소개(pubsub를 사용해야 하는 컴포넌트에 소개하면 됩니다)

import pubsub from ' pubsub-js'

3. 데이터를 받으려면 A 구성 요소에서 메시지를 구독하고 구독 콜백은 A 구성 요소 자체에 남아 있습니다.

methods(){demo(data){.....}mounted() {this.pid = pubsub. subscribe( 'xx'，this . demo) }

먼저 데이터를 받고 싶은 컴포넌트를 찾아서 마운트된 구성 항목을 설정하고 메시지를 구독해야 합니다subscribe 이 단어도 구독한다는 의미인데, 다음 컴포넌트는 작은 a의 역할을 합니다. , 그는 신문을 구독하고 주소 'hello', 를 남긴 다음 콜백을 사용하여 데이터를 얻으려고 합니다. 여기서 msgName과 데이터는 각각 구독 이름과 데이터입니다(즉, 집 주소입니다. 리틀A와 신문배달원이 들고 다니는 것) 신문)

import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "山鱼特效屋",
      address: "南京北城区"
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
      console.log("该消息已经发布", msgName, data);
    });
  },
  //使用完之后销毁该绑定事件避免后期错误使用
  beforeDestroy() {
    pubsub.unsubscribe();
  }
};

• 데이터 제공

pubsub. publish( ' xxx' ,数据)

Publish 메소드의 첫 번째 매개변수 'hello'는 구독 이름, 두 번째 매개변수(this. 이름)은 전달하려는 데이터입니다.

import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男"
    };
  },
  // 配置一个methods项
  methods: {
    snedStudentName() {
      // 选择给谁提供数据
      pubsub.publish("hello", this.name);
    }
  }
};

• Destroy Hook 이전에 구독을 취소하는 것이 가장 좋습니다.

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

1. 구문: $nextTick(콜백 함수)

2 기능: $nextTick에 있는 작업은 즉시 실행되지 않고 데이터를 기다립니다. DOM 업데이트 완료 후 실행

3. 사용 시기: 업데이트된 새 DOM을 기반으로 데이터가 변경되고 특정 작업을 수행하려면 nextTick에서 지정한 콜백 함수에서 실행해야 합니다.

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue에서 메시지 구독 및 게시 사용법을 간략하게 분석한 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!