Artikel yang menganalisis secara ringkas penggunaan langganan dan penerbitan mesej dalam Vue

Apakah itu langganan dan penerbitan mesej? Bagaimana untuk menggunakan Artikel berikut akan memperkenalkan kepada anda cara menggunakan langganan dan penerbitan mesej dalam Vue. Saya harap ia akan membantu anda!

1. Apakah itu langganan dan penerbitan mesej

Langganan dan penerbitan mesej ialah kaedah komunikasi antara komponen, sesuai untuk Komunikasi antara komponen sewenang-wenangnya. Dapat merealisasikan komunikasi antara komponen dengan lebih baik (langganan mesej dan penerbitan adalah seperti budak penghantar surat khabar. Contohnya, Little A melanggan surat khabar dan kemudian meninggalkan maklumatnya sendiri di pejabat akhbar, dan kemudian budak penghantar surat khabar menekan Mesej yang ditinggalkan oleh a menemui tempat di mana little a berada dan memberinya surat khabar)

2 Cara menggunakan pubsub

1. Mula-mula kita perlu memasang pubsub, Buka vscode → buka terminal → masukkan arahan pemasangan (anda juga boleh memasang dalam cmd) [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

npm i pubsub-js

2. Pengenalan (hanya masukkan ke dalam komponen yang perlu menggunakan pubsub)

import pubsub from ' pubsub-js'

3 Terima data Jika komponen A ingin menerima data, langgan mesej dalam komponen A dan panggilan balik yang dilanggan kekal dalam komponen A. sendiri.

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

Kita harus mencari komponen yang ingin menerima data dahulu, mengkonfigurasi item konfigurasi yang dipasang dan melanggan mesej langganPerkataan ini juga bermaksud untuk langgan. , iaitu, komponen berikut ialah peranan Little A. Dia ingin melanggan surat khabar, dan kemudian meninggalkan alamatnya 'hello', dan kemudian menggunakan panggilan balik untuk mendapatkan data. Di sini msgName, data Mereka adalah nama langganan dan data (iaitu, alamat rumah Little A dan surat khabar yang dibawa oleh budak penghantar surat khabar)

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();
  }
};

• Sediakan data

pubsub. publish( ' xxx' ,数据)

Parameter pertama 'hello' kaedah penerbitan ialah nama langganan dan parameter kedua (this.name) ialah data yang anda inginkan untuk lulus.

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

• Sebaik-baiknya berhenti melanggan dalam cangkuk beforeDestroy.

  beforeDestroy() {pubsub.unsubscribe();}

3.Tick seterusnya

1. Sintaks: ini >

2. Fungsi: Operasi yang diletakkan dalam $nextTick tidak akan dilaksanakan serta-merta, tetapi akan dilaksanakan selepas data dikemas kini dan kemas kini DOM selesai

3 data, ia mesti berdasarkan Apabila DOM baharu yang dikemas kini menjalankan operasi tertentu, ia mesti dilaksanakan dalam fungsi panggil balik yang ditentukan oleh nextTick.

(Mempelajari perkongsian video:

tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Artikel yang menganalisis secara ringkas penggunaan langganan dan penerbitan mesej dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!