In diesem Artikel werden hauptsächlich vier Kommunikationsmethoden für Vue-Komponenten vorgestellt: Kommunikation zwischen übergeordneten und untergeordneten Komponenten, EventBus-Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten, Komponentenkommunikation mithilfe des lokalen Caches und Vuex-Kommunikation. Ich hoffe, es hilft allen.
Die erste Kommunikationsmethode: Eltern-Kind-Komponentenkommunikation
Die übergeordnete Komponente muss dies tun insgesamt 4 Dinge Dinge
1.import son from './son.js' Registrieren Sie alle Unterkomponentennamen in „son“}
3. Wenden Sie die Unterkomponente in der Vorlage der übergeordneten Komponente an,
4. Wenn Sie Daten übergeben müssen Schreiben Sie zur Unterkomponente
in die Vorlage > Daten können direkt verwendet werden
// 1.引入子组件 import counter from './counter' import son from './son'
// 2.在ccmponents里注册子组件 components : { counter, son },
// 3.在template里使用子组件 <son></son>
// 4.如果需要传递数据,也是在templete里写 <counter :num="number"></counter>
Die übergeordnete Komponente muss insgesamt 2 Dinge tun
Ereignisse in der Vorlage definieren
Eine Funktion in Methoden schreiben und Hören Sie sich die Ereignisauslösung der Unterkomponente an
// 1.用Props接受数据 props: [ 'num' ],
// 2.如果需要修改得到的数据,可以这样写 props: [ 'num' ], data () { return { number : this.num } },
Da es sich jedoch um keine Eltern-Kind-Komponenten handelt, benötigen sie eine Zwischenkomponente, um sie zu verbinden.
Verwendung von EventBus zum Übergeben von Daten. Wir müssen insgesamt drei Dinge tun
// 1. 在templete里应用子组件时,定义事件changeNumber <counter :num="number" @changeNumber="changeNumber" > </counter>
// 2. 用changeNumber监听事件是否触发 methods: { changeNumber(e){ console.log('子组件emit了',e); this.number = e }, }
// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数 methods: { increment(){ this.number++ this.$emit('changeNumber', this.number) }, }
Verwandte Empfehlungen:
Erfahrungsaustausch bei der Entwicklung von Vue-KomponentenDas obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für 4 Vue-Komponenten-Kommunikationsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!