Oldukça basit VueJS uygulamasını, 3 bileşenler (Giriş, SelectSomething, DoStuff)</p> <p>Girişi bileşeni kullanıcı için sadece bir şeklidir ve ikinci bileşen görüntülemek için ihtiyacı olduğu girişini geçmek var VueJS

Question

bileşenler arasında veri paylaşımı nasıl giriş işleminde elde edilen bazı veriler.

Verileri bir bileşenden diğerine nasıl paylaşabilirim? Böylece ikinci bileşene yönlendirdiğimde hala Giriş bölümünde elde edilen verilere sahibim?

Answer 1

Sen props veya birbirinizle props kullanarak iletişim kurabilir Vue.js bileşenleri Başka

vm.$on('test', function (msg) { 
    console.log(msg) 
}) 

vm.$emit('test', 'hi') 
// -> "hi" 

Answer 2

bir bileşeninden bir olay yayarlar ve dinlemek mümkün olacak bir olay otobüsü kullanabilir ya veya events. Hepsi bileşenleriniz arasındaki ilişkiye göre değişir. , Ebeveyne çocuktan bilgi göndermek için

<template> 
<h2>Parent Component</h2> 
<child-component :propsName="example"></child-component> 
</template> 

<script> 
export default { 
data(){ 
    return{ 
    example: 'Send this variable to the child' 
    } 
} 
} 
</script> 

: Eğer sahne kullanmanız gerekecektir, Çocuk ebeveynden bilgi göndermek için

<template> 
<h2>Parent Component</h2> 
<child-component></child-component> 
</template> 

:

en bu küçük bir örnek ele alalım

Çocuk Bileşen

<script> 
... 
this.$emit('example', this.variable); 
</script> 

: etkinlikleri kullanmanız gerekecektir

Veli Bileşen

<template> 
<h2>Parent Component</h2> 
<child-component @example="methodName"></child-component> 
</template> 

<script> 
export default { 
methods: { 
    methodName(variable){ 
    ... 
    } 
} 
} 
</script> 

Kontrol Bu konu hakkında daha fazla bilgi için vue.js dokümantasyonu. Bu çok kısa bir giriş.