Apakah cara untuk berkomunikasi antara komponen Vue?

Kaedah: 1. Berkomunikasi melalui nenek moyang yang sama "$parent" atau "$root"; parameter "$emit" ialah nilai yang diluluskan dan komponen adik beradik lain mendengar acara tersuai melalui "$on".

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah cara untuk berkomunikasi antara komponen Vue?

1. Konsep komunikasi antara komponen

Sebelum kita mulakan, kami meletakkan komponen Pisah perkataan komunikasi antara

Komponen

Komunikasi

Kita semua tahu bahawa komponen adalah salah satu fungsi yang paling berkuasa bagi vue .vue in vue. Ia adalah komponen

Komunikasi merujuk kepada pengirim yang menghantar maklumat kepada penerima melalui media tertentu dan format tertentu untuk mencapai tujuan tertentu. Dalam erti kata yang luas, trafik mana-mana maklumat adalah komunikasi

Komunikasi antara komponen bermaksud komponen (.vue) menghantar maklumat dengan cara tertentu untuk mencapai tujuan tertentu

Sebagai contoh

Apabila kami menggunakan komponen jadual dalam rangka kerja UI, kami mungkin menghantar data tertentu ke dalam komponen jadual Ini pada asasnya membentuk komunikasi antara komponen

2. Komponen Apakah yang dimaksudkan antara. -penyelesaian komunikasi?

Pada zaman dahulu, orang ramai menghantar maklumat melalui stesen pos, merpati terbang untuk menyampaikan mesej, penggera kebakaran suar, simbol, bahasa, mata, sentuhan, dll. Hari ini, bila-bila masa Dengan perkembangan pesat sains dan teknologi, komunikasi pada asasnya diselesaikan secara berwayar atau tanpa wayar Pelbagai kaedah komunikasi seperti telefon berwayar, telefon talian tetap, telefon tanpa wayar, telefon bimbit, Internet dan juga panggilan video telah muncul satu demi satu

<.>Daripada perenggan di atas, kita dapat melihat bahawa intipati komunikasi adalah penyegerakan maklumat, perkongsian

Kembali ke vue, setiap komponen mempunyai skopnya sendiri, dan data antara komponen tidak boleh dikongsi

Tetapi dalam kerja pembangunan sebenar, kita sering perlu berkongsi data antara komponen, yang juga merupakan tujuan komunikasi komponen

Adalah perlu bagi mereka untuk berkomunikasi antara satu sama lain, supaya membentuk sistem yang organik dan lengkap

2 Klasifikasi komunikasi antara komponen

Pengkelasan komunikasi antara komponen boleh dibahagikan kepada yang berikut

• Komponen ibu bapa dan anak Komunikasi antara

• Komunikasi antara komponen adik-beradik

• Komunikasi antara nenek moyang dan keturunan

• Komunikasi antara komponen bukan perhubungan

3. Pelan komunikasi antara komponen

Organisasi 8. penyelesaian komunikasi biasa dalam vue

• Dihantarkan melalui prop

• Cetuskan acara tersuai melalui $emit

• Gunakan ref

• EventBus

• induk atau akar

• attr dan pendengar

• Sediakan dan Suntikan

• Vuex

data pas props

Senario yang berkenaan: komponen induk menghantar data kepada komponen anak

Komponen anak menetapkan atribut props dan mentakrifkan parameter yang akan diterima daripada komponen induk

Komponen induk menggunakan literal apabila menggunakan anak tag komponen Untuk melepasi nilai

Children.vue

props:{
    // 字符串形式
 name:String // 接收的类型参数
    // 对象形式
    age:{  
        type:Number, // 接收的类型为数值
        defaule:18,  // 默认值为18
       require:true // age属性必须传递
    }
}

Komponen Father.vue

a9a8458b1fe075f8270c39709cdd03ef

$emit mencetuskan peristiwa tersuai

Senario yang berkenaan: komponen kanak-kanak menghantar data kepada komponen induk

Komponen kanak-kanak mencetuskan peristiwa tersuai melalui $emit, $emit second parameter ialah nilai yang diluluskan

Komponen induk mengikat pendengar untuk mendapatkan parameter yang diluluskan oleh komponen anak

Chilfen.vue

this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />

ref

Komponen induk menetapkan rujukan apabila menggunakan komponen anak

Komponen induk memperoleh data dengan menetapkan rujukan komponen anak

Komponen induk

<Children ref="foo" />
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

Senario penggunaan: komponen adik-beradik lulus nilai

Buat bas masa pusat EventBus

Komponen adik-beradik mencetus peristiwa tersuai melalui $ emit, $emit Parameter kedua ialah nilai lulus

Komponen adik beradik lain mendengar acara tersuai melalui $on

Bus.js

// 创建一个中央时间总线类
class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

attrs dan pendengar

Senario yang boleh digunakan: Nenek moyang menghantar data kepada keturunan

Tetapkan atribut muat naik kelompok $attrs dan $listeners

this.$parent.on('add',this.add)

Mengandungi pengikatan sifat (kecuali kelas dan gaya) yang tidak diiktiraf (dan diperoleh) sebagai prop dalam skop induk.

this.$parent.emit('add')

Anda boleh lulus v-bind="$attrs" untuk lulus komponen dalaman

menyediakan dan menyuntik

dalam komponen ancestor Tentukan atribut sediakan dan kembalikan nilai yang diluluskan

Komponen keturunan menerima nilai yang diluluskan oleh komponen melalui suntikan

Komponen nenek moyang

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">
{{msg}}
</div>

Komponen keturunan inject:['foo'] // Dapatkan nilai yang diluluskan oleh komponen nenek moyang

vuex

Senario yang berkenaan: Pemindahan data komponen dengan perhubungan yang kompleks

Vuex berfungsi sebagai bekas untuk menyimpan pembolehubah yang dikongsi

keadaan digunakan untuk menyimpan pembolehubah yang dikongsi

pengambil, anda boleh menambah keadaan terbitan pengambil, (bersamaan dengan stor di kedai Dikira atribut), digunakan untuk mendapatkan nilai pembolehubah yang dikongsi

mutasi digunakan untuk menyimpan kaedah untuk mengubah suai keadaan.

Tindakan juga digunakan untuk menyimpan kaedah untuk mengubah keadaan, tetapi tindakan adalah berdasarkan mutasi. Biasa digunakan untuk melakukan beberapa operasi tak segerak

Ringkasan

Untuk pemindahan data komponen perhubungan ibu bapa-anak, prop dan $emit boleh dipilih untuk pemindahan Anda juga boleh memilih ref

Untuk pemindahan data komponen perhubungan adik-beradik, anda boleh Pilih $bus, dan kemudian anda boleh memilih $parent untuk pemindahan

Untuk pemindahan data komponen moyang dan keturunan, anda boleh memilih attrs dan pendengar atau Provide dan Inject

Pemindahan data komponen untuk perhubungan yang kompleks boleh disimpan dan dikongsi melalui Pembolehubah vuex

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah cara untuk berkomunikasi antara komponen Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!