Was sind die Kommunikationsmethoden von vue?

Kommunikationsmethode: 1. Die Unterkomponente legt das Props-Attribut fest und definiert die von der übergeordneten Komponente übergebenen Parameter. Die Komponente übergibt den Wert über Literale, wenn das Unterkomponenten-Tag verwendet wird. 2. Unterkomponenten lösen benutzerdefinierte Ereignisse über $emit aus, um zu kommunizieren. 3. Verwenden Sie ref für die Kommunikation. 4. Verwenden Sie EventBus für die Kommunikation. 5. Verwenden Sie $parent oder $root zur Kommunikation. 6. Verwenden Sie $attrs, um mit $listeners zu kommunizieren. 7. Verwenden Sie „provide“ und „inject“, um zu kommunizieren. 8. Verwenden Sie Vuex.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Wir alle wissen, dass Komponenten eine der leistungsstärksten Funktionen von Vue sind. Wir können jede .vue-Datei als eine Komponente betrachten, die den Sender über ein bestimmtes Medium und ein bestimmtes Format übermittelt bestimmten Zweck. Im Großen und Ganzen handelt es sich bei jedem Informationsverkehr um die Kommunikation zwischen Komponenten. Dies bedeutet, dass Komponenten (.vue) Informationen auf irgendeine Weise weitergeben, um einen bestimmten Zweck zu erreichen. Wenn wir beispielsweise die Tabellenkomponente im UI-Framework verwenden, gehen wir möglicherweise zur Tabelle Dabei werden bestimmte Daten übergeben, die im Wesentlichen die Kommunikation zwischen den Komponenten bilden.

1. Was löst die Kommunikation zwischen Komponenten?

In der Antike übermittelten die Menschen Informationen über Poststationen, fliegende Tauben, die Nachrichten überbrachten, Leuchtfeuer, Feuermelder, Symbole, Sprache, Augen, Berührung usw. Heute mit dem Stand der Technik: Mit der rasanten Entwicklung Chinas ist die Kommunikation im Wesentlichen durch drahtgebundene oder drahtlose Kommunikationsmethoden wie drahtgebundene Telefone, Festnetztelefone, Mobiltelefone, das Internet und sogar Videotelefone entstanden Im obigen Absatz können wir sehen, dass die Kommunikation im Wesentlichen darin besteht, dass Informationen synchronisiert und an Vue weitergegeben werden. Daten zwischen Komponenten können jedoch häufig nicht gemeinsam genutzt werden Komponenten, die auch die Grundlage für die Kommunikation der Komponenten bilden, um ein organisches und vollständiges System zu bilden

2. Die Klassifizierung der Kommunikation zwischen Komponenten können in Folgendes unterteilt werden: Kommunikation zwischen übergeordneten und untergeordneten Komponenten, Kommunikation zwischen Geschwisterkomponenten, Kommunikation zwischen Vorfahren- und Nachkommenkomponenten, Kommunikation zwischen nicht relationalen Komponenten

Beziehung Diagramm:

• 3. Komponentenübergreifende Kommunikationslösungen

• Organisieren Sie 8 gängige Kommunikationslösungen in Vue

• Weiterleiten von Requisiten

• Lösen Sie benutzerdefinierte Ereignisse über $emit aus.

U se ref

EventBus Daten weitergeben

• Anwendbares Szenario: Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

• Die untergeordnete Komponente legt das Props-Attribut fest und definiert die von der übergeordneten Komponente übergebenen Parameter

• Die übergeordnete Komponente übergibt den Wert über Literale bei der Verwendung der untergeordneten Komponente tag

• Children.vue code><p><pre class="brush:js;toolbar:false">props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // 默认值为18 require:true // age属性必须传递 } }</pre></p> <code>Father.vue Komponente

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

• $emit löst benutzerdefinierte Ereignisse aus

• Anwendbare Szenarien: Untergeordnete Komponenten übergeben Daten zu übergeordneten Komponenten
• Untergeordnete Komponenten lösen sich selbst durch $emit aus. Definieren Sie das Ereignis. Der zweite Parameter von $emit ist der übergebene Wert.
  Die übergeordnete Komponente bindet den Listener, um die von der untergeordneten Komponente übergebenen Parameter abzurufen
• Chilfen. vue

  this.$emit('add', good)

  Father.vue

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

ref

Die übergeordnete Komponente legt ref fest, wenn die untergeordnete Komponente verwendet wird

• Die übergeordnete Komponente legt die untergeordnete Komponente ref fest, um Daten zu erhalten Zentraler Ereignisbus EventBus

• Geschwisterkomponente übergibt $ emit-Trigger von Definieren Sie das Ereignis. Der zweite Parameter von $emit ist der übergebene Wert über $on oder $root

Bauen Sie eine Kommunikationsbrücke durch den gemeinsamen Vorfahren $parent oder $root

Children.vue

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

Father.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的功能

$emit 触发自定义事件

适用场景：子组件传递数据给父组件

子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

父组件绑定监听器获取到子组件传递过来的参数

Chilfen.vue

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

Father.vue

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

ref

• 父组件在使用子组件的时候设置ref

• 父组件通过设置子组件ref

  Geschwisterkomponente

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

eine weitere Geschwisterkomponente

this.$parent.emit('add')

$attrs und $listeners

• Anwendbare Szenarien: Vorfahren Weitergabe von Daten an Nachkommen

• Festlegen der Batch-Upload-Attribute $attrs und $listeners

• 包含了父级作用域中不作为 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前端开发】

Das obige ist der detaillierte Inhalt vonWas sind die Kommunikationsmethoden von vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!