Apakah kaedah komunikasi vue?

Kaedah komunikasi: 1. Subkomponen menetapkan atribut props dan mentakrifkan parameter yang akan diterima daripada komponen induk; 2. Subkomponen mencetuskan peristiwa tersuai melalui $emit untuk berkomunikasi. 3. Gunakan rujukan untuk komunikasi. 4. Gunakan EventBus untuk komunikasi. 5. Gunakan $parent atau $root untuk berkomunikasi. 6. Gunakan $attrs untuk berkomunikasi dengan $pendengar. 7. Gunakan menyediakan dan menyuntik untuk berkomunikasi. 8. Gunakan vuex.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Kita semua tahu bahawa komponen adalah salah satu fungsi vue yang paling berkuasa penerima untuk mencapai tujuan tertentu. Secara umum, sebarang trafik maklumat ialah komunikasi antara komponen, yang bermaksud komponen (.vue) menghantar maklumat dalam beberapa cara untuk mencapai tujuan tertentu Contohnya, apabila kami menggunakan komponen jadual dalam rangka kerja UI, kami boleh pergi ke jadual komponen. Data tertentu dihantar masuk, dan ini pada asasnya membentuk komunikasi antara komponen.

1. Apa yang diselesaikan dengan komunikasi antara komponen

Pada zaman dahulu, orang ramai menghantar mesej melalui rumah penginapan, merpati terbang, penggera kebakaran suar, simbol, bahasa, mata, sentuhan, dan lain-lain. Pada masa kini, dengan perkembangan pesat sains dan teknologi, komunikasi pada asasnya diselesaikan dengan berwayar atau tanpa wayar Pelbagai kaedah komunikasi seperti telefon berwayar, telefon talian tetap, telefon tanpa wayar, telefon bimbit, Internet dan juga telefon video telah muncul satu. Selepas satu lagi. Daripada petikan ini, kita dapat melihat bahawa intipati komunikasi adalah penyegerakan maklumat kembali kepada vue Setiap komponen mempunyai skopnya sendiri sering memerlukan Biarkan komponen berkongsi data, yang juga merupakan tujuan komunikasi komponen Biarkan mereka berkomunikasi antara satu sama lain, supaya membentuk sistem yang organik dan lengkap

2. Klasifikasi komunikasi antara komponen

Klasifikasi komunikasi antara komponen boleh dibahagikan kepada yang berikut

• Komunikasi antara komponen ibu bapa dan anak

• Komunikasi antara komponen adik-beradik

• Komunikasi antara komponen moyang dan keturunan

• Komunikasi antara komponen bukan hubungan

Rajah perhubungan:

3. Penyelesaian komunikasi antara komponen

Susun 8 penyelesaian komunikasi konvensional dalam vue

• Melalui prop

• Cetuskan acara tersuai melalui $emit

• Gunakan ref

• EventBus

• $parent atau $root

• attr dan pendengar

• Sediakan dan Inject

• Vuex

data pas props

• Senario yang berkenaan: komponen induk menghantar data ke komponen anak

• Komponen anak menetapkan atribut props dan mentakrifkan komponen induk penerima yang diluluskan parameter

• Komponen induk menghantar nilai melalui literal dalam teg komponen anak

Children.vue

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

KomponenFather.vue

<Children name="jack" age=18 />

$emit mencetuskan peristiwa tersuai

Senario yang berkenaan: komponen anak menghantar data kepada induk Komponen

subkomponen mencetuskan peristiwa tersuai melalui $emit dan parameter kedua $emit ialah nilai yang diluluskan

Komponen induk mengikat pendengar untuk mendapatkan parameter yang diluluskan oleh subkomponen

Chilfen.vue

this.$emit('add', good)

Father.vue

<Children @add="cartAdd($event)" />

ref

• Komponen induk menetapkan

  ref

• apabila menggunakan komponen anak Komponen induk memperoleh data dengan menetapkan komponen anak

  ref

  <🎜. >
Komponen induk

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

EventBus

Senario penggunaan: menghantar nilai kepada komponen adik beradik
Buat bas acara pusat EventBus
Komponen adik-beradik mencetuskan acara tersuai melalui $emit dan parameter kedua $emit ialah nilai yang diluluskan
Satu lagi komponen adik-beradik mendengar acara tersuai melalui $on
Bus.js

Children1.vue

// 创建一个中央时间总线类  
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的功能

Children2.vue

this.$bus.$emit('foo')

this.$bus.$on('foo', this.handle)

$ibu bapa atau $ root

melalui nenek moyang biasa $ibu bapa atau $ root membina jambatan komunikasi
komponen adik beradik

komponen adik beradik yang lain

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

this.$parent.emit('add')

$attrs dengan $ pendengar

Senario yang berkenaan: nenek moyang menghantar data kepada keturunan
Tetapkan atribut muat naik kelompok $ attrs dan $ pendengar

• 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。

• 可以通过 v-bind="$attrs" 传⼊内部组件

// 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>

provide 与 inject

• 在祖先组件定义provide属性，返回传递的值

• 在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

• 适用场景: 复杂关系的组件数据传递

• Vuex作用相当于一个用来存储共享变量的容器 

• state用来存放共享变量的地方

• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

• mutations用来存放修改state的方法。

• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref

• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递

• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject

• 复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

Atas ialah kandungan terperinci Apakah kaedah komunikasi vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!