Heim > Artikel > Web-Frontend > Wie kommuniziert man zwischen Komponenten? Bestandsaufnahme der Kommunikationsmethoden der Vue-Komponenten (sammelbar)

Wie kommuniziert man zwischen Komponenten? Bestandsaufnahme der Kommunikationsmethoden der Vue-Komponenten (sammelbar)

青灯夜游nach vorne: 2022-08-19 20:04:021351Durchsuche

VueWie kommuniziert man zwischen Komponenten? Dieser Artikel gibt einen Überblick über die 10 Komponenten-Kommunikationsmethoden von Vue2 und Vue3. Ich hoffe, er ist für alle hilfreich!

Es gibt viele Möglichkeiten der Komponentenkommunikation in Vue, und es wird viele Unterschiede bei der Implementierung von Vue2 und Vue3 geben. In diesem Artikel werden die Komponentenkommunikationsmethoden von Vue2 und Vue3 anhand von 选项式API 组合式API以及setupdrei verschiedenen Implementierungsmethoden umfassend vorgestellt. Die zu implementierenden Kommunikationsmethoden sind in der folgenden Tabelle aufgeführt. (Lernvideo-Sharing: vue-Video-Tutorial)

Methode	Vue2	Vue3
Vater zu Sohn	props	props
Vom Sohn zum Vater	$emit	emits
Vater an Sohn	$attrs	attrs
Sohn an Vater	$listeners	Keine (zusammengeführt in attrs.-Methode)
Vater an den Sohn	bereitstellen	bereitstellen
Sohn zum Elternteil	inject	inject
Untergeordnete Komponente greift auf übergeordnete Komponente zu	$parent	none
übergeordnete Komponente greift auf untergeordnete Komponente zu	$children	keine
Elternteil Komponente Zugriff auf untergeordnete Komponenten	$ref	expose&ref
Brotherly übergebener Wert	EventBus	mitt

props

props sind eine der am häufigsten verwendeten Kommunikationsmethoden in der Komponentenkommunikation. Die übergeordnete Komponente wird über v-bind übergeben und die untergeordnete Komponente wird über Requisiten empfangen. Im Folgenden sind die drei Implementierungsmethoden aufgeführt: Optionale API, kombinierte API, Setup-Syntaxzucker,

//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data() {
    return {
      parentMsg: '父组件信息'
    }
  }
}
</script>


//子组件

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {
  props:['msg']
}
</script>

Der Datenfluss in Requisiten ist ein Einzelelement, das heißt, die untergeordnete Komponente kann den von der übergeordneten Komponente übergebenen Wert nicht ändern

Wenn Sie in der kombinierten API andere Variablen in der untergeordneten Komponente zum Empfangen verwenden möchten Um den Wert von Requisiten zu ändern, müssen Sie toRef verwenden, um die Eigenschaften in Responsive umzuwandeln.

Die untergeordnete Komponente kann ein Ereignis veröffentlichen und einige Parameter über emit übergeben, und die übergeordnete Komponente überwacht dieses Ereignis über v-on

Optionale API

//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import { ref,defineComponent } from 'vue'
import Child from './Child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const parentMsg = ref('父组件信息')
    return {
      parentMsg
    };
  },
});
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script>
import { defineComponent,toRef } from "vue";
export default defineComponent({
    props: ["msg"],// 如果这行不写，下面就接收不到
    setup(props) {
        console.log(props.msg) //父组件信息
        let parentMsg = toRef(props, 'msg')
        return {
            parentMsg
        };
    },
});
</script>

Kombinierte API

//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const parentMsg = ref('父组件信息')
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script setup>
import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
</script>

Setup Syntaxzucker

//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  methods: {
    getFromChild(val) {
      console.log(val) //我是子组件数据
    }
  }
}
</script>

// 子组件

<template>
  <div>
    <button @click="sendFun">send</button>
  </div>
</template>
<script>
export default {
  methods:{
    sendFun(){
      this.$emit('sendMsg','我是子组件数据')
    }
  }
}
</script>

Die untergeordnete Komponente verwendet $attrs, um alle Attribute der übergeordneten Komponente abzurufen, mit Ausnahme der von Requisiten übergebenen Attribute und der Attributbindungsattribute (Klasse und Stil).

Die untergeordnete Komponente verwendet $listeners, um alle V-on-Ereignis-Listener der übergeordneten Komponente abzurufen (mit Ausnahme von .native-Modifikatoren), die in Vue3 nicht mehr verwendet werden, aber die Attribute in Vue3 können nicht nur die vom übergeordneten Element übergebenen Attribute abrufen Komponente Sie können auch den v-on-Ereignis-Listener der übergeordneten Komponente erhalten. Optionale API die Methode der übergeordneten Komponente in Vue3 Wenn Sie vor der Methode hinzufügen müssen, ist parentFun->onParentFun

provide: ein Objekt oder eine Funktion, die ein Objekt zurückgibt. Es enthält die Attribute, die zukünftigen Generationen gegeben werden sollen: ein String-Array oder ein Objekt. Rufen Sie den von der übergeordneten Komponente oder der übergeordneten Komponente bereitgestellten Wert ab, der in jeder untergeordneten Komponente über inject erhalten werden kann :

provide/inject eignet sich grundsätzlich für den Einsatz bei tiefer Bauteilverschachtelung. Es wird im Allgemeinen in der Komponentenentwicklung verwendet.

parent/children

$children: Die übergeordnete Komponente erhält die Vue-Instanz von die untergeordnete Komponente, bei der es sich um ein Array und eine Sammlung direkter untergeordneter Komponenten handelt, die Reihenfolge der untergeordneten Komponenten ist jedoch nicht garantiert Die Komponente reagiert nicht API

//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
    return {
      getFromChild
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        const sendFun = () => {
            ctx.emit('sendMsg', '我是子组件数据')
        }
        return {
            sendFun
        };
    },
});
</script>

Setup-Syntax-Zucker

//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script setup>
import Child from './Child'
const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>
<script setup>
import { defineEmits } from "vue";
const emits = defineEmits(['sendMsg'])
const sendFun = () => {
    emits('sendMsg', '我是子组件数据')
}
</script>

Beachten Sie, dass

das Erhalten der Unterkomponenteninstanz über ref nach dem Mounten der Seite abgerufen werden muss.

Bei Verwendung von Setup-Syntax-Zucker muss die untergeordnete Komponente der übergeordneten Komponente Elemente oder Methoden zugänglich machen, um sie zu erhalten.

EventBus/mitt

Schwesterkomponenten können über sie kommunizieren Eine EventBus-Implementierung im Event Center erstellt eine neue Vue-Instanz, um Ereignisse zu überwachen, auszulösen und zu zerstören.

In Vue3 gibt es keine EventBus-Geschwisterkomponentenkommunikation, aber jetzt gibt es eine alternative Lösung mitt.js, das Prinzip ist immer noch EventBus

Optionale API

//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data(){
    return {
      msg1:'子组件msg1',
      msg2:'子组件msg2'
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
  }
}
</script>

//子组件

<template>
  <div>
    <button @click="getParentFun">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods:{
    getParentFun(){
      this.$listeners.parentFun('我是子组件数据')
    }
  },
  created(){
    //获取父组件中所有绑定属性
    console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    //获取父组件中所有绑定方法    
    console.log(this.$listeners) //{parentFun:f}
  }
}
</script>

Kombinierte API

//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent,ref } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    const parentFun = (val) => {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
    return {
      parentFun,
      msg1,
      msg2
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        //获取父组件方法和事件
        console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
        const getParentFun = () => {
            //调用父组件方法
            ctx.attrs.onParentFun('我是子组件数据')
        }
        return {
            getParentFun
        };
    },
});
</script>

mitt.js

bus.js

mitt.js

//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
  console.log(`父组件方法被调用,获得子组件传值：${val}`)
}
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script setup>
import { useAttrs } from "vue";

const attrs = useAttrs()
//获取父组件方法和事件
console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
    //调用父组件方法
    attrs.onParentFun('我是子组件数据')
}
</script>

//父组件
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg1: '子组件msg1',
      msg2: '子组件msg2'
    }
  },
  provide() {
    return {
      msg1: this.msg1,
      msg2: this.msg2
    }
  }
}
</script>

//子组件

<script>
export default {
  inject:['msg1','msg2'],
  created(){
    //获取高层级提供的属性
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }
}
</script>

Setup-Syntax-Zucker

//父组件

<script>
import Child from './Child'
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    provide("msg1", msg1)
    provide("msg2", msg2)
    return {
      
    }
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { inject, defineComponent } from "vue";
export default defineComponent({
    setup() {
        console.log(inject('msg1').value) //子组件msg1
        console.log(inject('msg2').value) //子组件msg2
    },
});
</script>

Am Ende geschrieben

Tatsächlich können Komponenten auch mit Vuex- oder Pinia-Zustandsverwaltungstools kommunizieren (dies wird jedoch im Allgemeinen nicht für die Kommunikation zwischen Komponenten empfohlen, da dies zu dem Problem führt, dass Komponenten nicht wiederverwendet werden können). Informationen zur Verwendung von Vuex und Pinia finden Sie in diesem Artikel. Ein Artikel, in dem Pinia und Vuex analysiert werden

Das obige ist der detaillierte Inhalt vonWie kommuniziert man zwischen Komponenten? Bestandsaufnahme der Kommunikationsmethoden der Vue-Komponenten (sammelbar). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

字符串 class JS 对象事件

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Lassen Sie uns darüber sprechen, wie man Axios in Vite+vue3.0+ts kapselt.Nächster Artikel：Lassen Sie uns darüber sprechen, wie man Axios in Vite+vue3.0+ts kapselt.

In Verbindung stehende Artikel

Mehr sehen