Wie kommuniziere ich zwischen Vue-Komponenten? Der folgende Artikel stellt Ihnen die sechs M?glichkeiten der Vue-Komponentenkommunikation vor. Ich hoffe, er ist hilfreich für Sie!

Komponenten sind eine der leistungsst?rksten Funktionen von vue.js, und die Bereiche der Komponenteninstanzen sind unabh?ngig voneinander, was bedeutet, dass Daten zwischen verschiedenen Komponenten nicht aufeinander verweisen k?nnen. Im Allgemeinen k?nnen Komponenten mehrere Beziehungen haben.

Wie w?hlt man eine effektive Kommunikationsmethode für verschiedene Nutzungsszenarien aus? Dies ist das Thema, das wir untersuchen werden. Dieser Artikel fasst verschiedene Arten der Kommunikation zwischen Vue-Komponenten zusammen, wie z. B. props, emit/emit/on, vuex, parent/parent/children, attrs/attrs/listeners und Provide/inject, und erl?utert die Unterschiede anhand leicht verst?ndlicher Beispiele . und Nutzungsszenarien, ich hoffe, es kann meinen Freunden helfen. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Methode 1, Requisiten/$emit

übergeordnete Komponente A wird über Requisiten an untergeordnete Komponente B übergeben, und B an A übergibt $emit in B-Komponente , implementiert von v-on in Komponente A.

1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente.

Als N?chstes veranschaulichen wir anhand eines Beispiels, wie die übergeordnete Komponente den Wert an die untergeordnete Komponente weitergibt: So erhalten Sie die Datenbenutzer in der übergeordneten Komponente App.vue im untergeordneten Element Komponente Users.vue:["Henry","Bucky", "Emily"]

//App.vue父組件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定義名稱便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子組件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值，然后呈現(xiàn)到頁面
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props:{
    users:{           //這個(gè)就是父組件中子標(biāo)簽自定義名字
      type:Array,
      required:true
    }
  }
}
</script>

Zusammenfassung: Die übergeordnete Komponente gibt Daten über Requisiten an die untergeordnete Komponente weiter. Hinweis: Es gibt drei Formen von Daten in Komponenten: Daten, Requisiten, berechnet ?an übergeordnete Komponenten. Komponente übergibt Wert: Wenn wir auf ?Vue.js Demo“ klicken, übergibt die untergeordnete Komponente den Wert an die übergeordnete Komponente und der Text ?ndert sich von ursprünglich ?Ein Wert wird übergeben“ zu ?Das untergeordnete Element übergibt den Wert“. zur übergeordneten Komponente", Realisierung der untergeordneten Komponente zur übergeordneten Komponente. übergabe von Komponentenwerten.

// 子組件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//綁定一個(gè)點(diǎn)擊事件
  </header>
</template>
<script>
export default {
  name: &#39;app-header&#39;,
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父組件傳值");//自定義事件  傳遞值“子向父組件傳值”
    }
  }
}
</script>

// 父組件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致
   // updateTitle($event)接受傳遞過來的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      title:"傳遞的是一個(gè)值"
    }
  },
  methods:{
    updateTitle(e){   //聲明這個(gè)函數(shù)
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

Zusammenfassung: Die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente. Tats?chlich sendet die untergeordnete Komponente ihre eigenen Daten an die übergeordnete Komponente.

Methode 2, $emit/$on

Diese Methode verwendet eine leere Vue-Instanz als zentralen Ereignisbus (Event Center). Es l?st Ereignisse aus und überwacht Ereignisse. Es implementiert auf clevere und einfache Weise die Kommunikation zwischen allen Komponenten, einschlie?lich Vater-Sohn, Bruder und zwischen Ebenen. Wenn unser Projekt relativ gro? ist, k?nnen wir vuex w?hlen, eine bessere L?sung für das Zustandsmanagement.

1. Spezifische Implementierungsmethode:

    var Event=new Vue();
    Event.$emit(事件名,數(shù)據(jù));
    Event.$on(事件名,data => {});

$emit/$on

這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。

1.具體實(shí)現(xiàn)方式：

<div id="itany">
	<my-a></my-a>
	<my-b></my-b>
	<my-c></my-c>
</div>
<template id="a">
  <div>
    <h3>A組件：{{name}}</h3>
    <button @click="send">將數(shù)據(jù)發(fā)送給C組件</button>
  </div>
</template>
<template id="b">
  <div>
    <h3>B組件：{{age}}</h3>
    <button @click="send">將數(shù)組發(fā)送給C組件</button>
  </div>
</template>
<template id="c">
  <div>
    <h3>C組件：{{name}}，{{age}}</h3>
  </div>
</template>
<script>
var Event = new Vue();//定義一個(gè)空的Vue實(shí)例
var A = {
	template: &#39;#a&#39;,
	data() {
	  return {
	    name: &#39;tom&#39;
	  }
	},
	methods: {
	  send() {
	    Event.$emit(&#39;data-a&#39;, this.name);
	  }
	}
}
var B = {
	template: &#39;#b&#39;,
	data() {
	  return {
	    age: 20
	  }
	},
	methods: {
	  send() {
	    Event.$emit(&#39;data-b&#39;, this.age);
	  }
	}
}
var C = {
	template: &#39;#c&#39;,
	data() {
	  return {
	    name: &#39;&#39;,
	    age: ""
	  }
	},
	mounted() {//在模板編譯完成后執(zhí)行
	Event.$on(&#39;data-a&#39;,name => {
	     this.name = name;//箭頭函數(shù)內(nèi)部不會產(chǎn)生新的this，這邊如果不用=>,this指代Event
	})
	Event.$on(&#39;data-b&#39;,age => {
	     this.age = age;
	})
	}
}
var vm = new Vue({
	el: &#39;#itany&#39;,
	components: {
	  &#39;my-a&#39;: A,
	  &#39;my-b&#39;: B,
	  &#39;my-c&#39;: C
	}
});	
</script>

2.舉個(gè)例子

假設(shè)兄弟組件有三個(gè)，分別是A、B、C組件，C組件如何獲取A或者B組件的數(shù)據(jù)

let defaultCity = "上海"
try {   // 用戶關(guān)閉了本地存儲功能，此時(shí)在外層加個(gè)try...catch
  if (!defaultCity){
    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
  }
}catch(e){}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity(state, city) {
      state.city = city
      try {
      window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
      // 數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面
      } catch (e) {}
    }
  }
})

$on2. Angenommen, es gibt drei Geschwisterkomponenten, n?mlich A-, B- und C-Komponenten

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array 
復(fù)制代碼

$ on lauscht auf die benutzerdefinierten Ereignisse data-a und data-b. Da manchmal nicht sicher ist, wann das Ereignis ausgel?st wird, wird es normalerweise im gemounteten oder erstellten Hook überwacht.

Methode 3, vuex

??1 Stellen Sie kurz das Prinzip von Vuex vor Vuex implementiert einen unidirektionalen Datenfluss und verfügt über einen Status zum globalen Speichern von Daten. Wenn eine Komponente die Daten im Status ?ndern m?chte, muss dies über Mutation erfolgen, der auch einen Abonnentenmodus für den Aufruf externer Plug-Ins bereitstellt Erhalten Sie Aktualisierungen der Staatsdaten. Wenn alle asynchronen Vorg?nge (üblicherweise als Back-End-Schnittstellen zum asynchronen Abrufen von Aktualisierungsdaten bezeichnet) oder synchrone Batch-Vorg?nge eine Aktion erfordern, kann die Aktion den Status nicht direkt ?ndern, und die Statusdaten müssen weiterhin durch Mutation ge?ndert werden. Schlie?lich wird es basierend auf den Zustands?nderungen in der Ansicht gerendert. ??

2.簡要介紹各模塊在流程中的功能： Vue Components：Vue組件。HTML頁面上，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對應(yīng)action進(jìn)行回應(yīng)。 dispatch：操作行為觸發(fā)方法，是唯一能執(zhí)行action的方法。 actions：操作行為處理模塊,由組件中的$store.dispatch('action 名稱', data1)來觸發(fā)。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state。負(fù)責(zé)處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個(gè)同名方法，按照注冊的順序依次觸發(fā)。向后臺API請求的操作就在這個(gè)模塊中進(jìn)行，包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈?zhǔn)接|發(fā)。 commit：狀態(tài)改變提交操作方法。對mutation進(jìn)行提交，是唯一能執(zhí)行mutation的方法。 mutations：狀態(tài)改變操作方法，由actions中的commit('mutation 名稱')來觸發(fā)。是Vuex修改state的唯一推薦方法。該方法只能進(jìn)行同步操作，且方法名只能全局唯一。操作之中會有一些hook暴露出來，以進(jìn)行state的監(jiān)控等。 state：頁面狀態(tài)管理容器對象。集中存儲Vue components中data對象的零散數(shù)據(jù)，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁面顯示所需的數(shù)據(jù)從該對象中進(jìn)行讀取，利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。 getters：state對象讀取方法。圖中沒有單獨(dú)列出該模塊，應(yīng)該被包含在了render中，Vue Components通過該方法讀取全局state對象。 3.Vuex與localStorage vuex 是 vue 的狀態(tài)管理器，存儲的數(shù)據(jù)是響應(yīng)式的。但是并不會保存起來，刷新之后就回到了初始狀態(tài)，具體做法應(yīng)該在vuex里數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的數(shù)據(jù)，取出來再替換store里的state。

let defaultCity = "上海"
try {   // 用戶關(guān)閉了本地存儲功能，此時(shí)在外層加個(gè)try...catch
  if (!defaultCity){
    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
  }
}catch(e){}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity(state, city) {
      state.city = city
      try {
      window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
      // 數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面
      } catch (e) {}
    }
  }
})

這里需要注意的是：由于vuex里，我們保存的狀態(tài)，都是數(shù)組，而localStorage只支持字符串，所以需要用JSON轉(zhuǎn)換：

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array 
復(fù)制代碼

方法四、$attrs/$$attrs/$listeners

1.簡介

多級組件嵌套需要傳遞數(shù)據(jù)時(shí)，通常使用的方法是通過vuex。但如果僅僅是傳遞數(shù)據(jù)，而不做中間處理，使用 vuex 處理，未免有點(diǎn)大材小用。為此Vue2.4 版本提供了另一種方法----$attrs/$listeners

$attrs\text{: Enth?lt den übergeordneten Bereich, der nicht von}proabgedeckt\; wird\mathrm{Anerkannt\; von\; p}(\text{und erhalten})\text{s Feature-Bindung}(class\text{und}sttyl\text{e}Au?er\text{)}\mathrm{.\; Wenn\; eine\; Komponente\; kein}pro\text{p}deklariert,\; enth?lt\; diese\; alle\; übergeordneten\; Bereichsbindungen(clas\text{s Au?er}\mathrm{und}styl\text{e}\text{)}\mathrm{und\; k?nnen\; durch}v?b\mathrm{i\; geleitet\; werden}nd\mathrm{=}attrs:\; Enth?lt\; Attributbindungen\; im\; übergeordneten\; Bereich,\; die\; von\; Requisiten\; (au?er\; Klasse\; und\; Stil)\; nicht\; erkannt\; (und\; erhalten)\; werden.\; Wenn\; eine\; Komponente\; keine\; Requisiten\; deklariert,\; werden\; alle\; übergeordneten\; Bereiche\; hier\; in\; die\; Dom?ne\; aufgenommen\; Bindung\; (au?er\; Klasse\; und\; Stil)\; und\; kann\; v-bind="$

$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

接下來我們看個(gè)跨級通信的例子：

// index.vue
<template>
  <div>
    <h2>浪里行舟</h2>
    <child-com1
      :foo="foo"
      :boo="boo"
      :coo="coo"
      :doo="doo"
      title="前端工匠"
    ></child-com1>
  </div>
</template>
<script>
const childCom1 = () => import("./childCom1.vue");
export default {
  components: { childCom1 },
  data() {
    return {
      foo: "Javascript",
      boo: "Html",
      coo: "CSS",
      doo: "Vue"
    };
  }
};
</script>

// childCom1.vue
<template class="border">
  <div>
    <p>foo: {{ foo }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <child-com2 v-bind="$attrs"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import("./childCom2.vue");
export default {
  components: {
    childCom2
  },
  inheritAttrs: false, // 可以關(guān)閉自動掛載到組件根元素上的沒有在props聲明的屬性
  props: {
    foo: String // foo作為props屬性綁定
  },
  created() {
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>

// childCom2.vue
<template>
  <div class="border">
    <p>boo: {{ boo }}</p>
    <p>childCom2: {{ $attrs }}</p>
    <child-com3 v-bind="$attrs"></child-com3>
  </div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
  components: {
    childCom3
  },
  inheritAttrs: false,
  props: {
    boo: String
  },
  created() {
    console.log(this.$attrs); // { "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
  }
};
</script>

// childCom3.vue
<template>
  <div class="border">
    <p>childCom3: {{ $attrs }}</p>
  </div>
</template>
<script>
export default {
  props: {
    coo: String,
    title: String
  }
};
</script>

如上圖所示$attrs表示沒有繼承數(shù)據(jù)的對象，格式為{屬性名：屬性值}。Vue2.4提供了$attrs , $listeners 來傳遞數(shù)據(jù)與事件，跨級組件之間的通訊變得更簡單。

簡單來說：$attrs與$listeners 是兩個(gè)對象，$attrs 里存放的是父組件中綁定的非 Props 屬性，$listeners里存放的是父組件中綁定的非原生事件。

方法五、provide/inject

1.簡介

Vue2.2.0新增API,這對選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。一言而蔽之：祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態(tài)，跨級組件間建立了一種主動提供與依賴注入的關(guān)系。

2.舉個(gè)例子

假設(shè)有兩個(gè)組件： A.vue 和 B.vue，B 是 A 的子組件

// A.vue
export default {
  provide: {
    name: '浪里行舟'
  }
}

// B.vuee
xport default {
  inject: ['name'],  mounted () {
    console.log(this.name);  // 浪里行舟
  }
}

可以看到，在 A.vue 里，我們設(shè)置了一個(gè) provide: name，值為 浪里行舟，它的作用就是將 name 這個(gè)變量提供給它的所有子組件。而在 B.vue 中，通過 inject 注入了從 A 組件中提供的 name 變量，那么在組件 B 中，就可以直接通過 this.name 訪問這個(gè)變量了，它的值也是 浪里行舟。這就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的----vue官方文檔 所以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 浪里行舟。

方法六、$parent /$$parent/$children與 ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例$parent /$children：訪問父 / 子實(shí)例 需要注意的是：這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。我們先來看個(gè)用 ref來訪問組件的例子

// component-a 子組件
export default {
  data () {
    return {
      title: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}

// 父組件
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js
      comA.sayHello();  // 彈窗
    }
  }
</script>
復(fù)制代碼

不過，這兩種方法的弊端是，無法在跨級或兄弟間通信。

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen Vue-Komponenten? Kurze Analyse von sechs Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!