简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > View.js > teks badan

Pengenalan ringkas kepada pemprosesan acara asas dalam vue

WBOY
Lepaskan： 2022-08-08 17:32:50
ke hadapan
1672 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan isu berkaitan tentang pemprosesan acara asas Vue merupakan aspek yang perlu bagi setiap projek Vue. Ia digunakan untuk menangkap input pengguna, berkongsi data dan banyak cara kreatif lain. Mari kita lihat bersama-sama, saya harap ia akan membantu semua orang.

Pengenalan ringkas kepada pemprosesan acara asas dalam vue

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Pemprosesan acara Vue ialah Aspek yang perlu bagi setiap projek Vue. Ia digunakan untuk menangkap input pengguna, berkongsi data dan banyak cara kreatif lain.

Dalam artikel ini, saya akan membincangkan perkara asas dan memberikan beberapa contoh kod untuk mengendalikan acara.

Pengendalian acara asas

Menggunakan arahan v-on (@ ringkasnya) kita boleh mendengar acara DOM dan menjalankan kaedah pengendali atau Javascript sebaris: 

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />
Salin selepas log masuk

kami Kami akan merangkumi beberapa acara yang lebih biasa yang mungkin anda ingin tangkap, klik di sini untuk senarai lengkap acara DOM.

Memancarkan acara tersuai

Kes penggunaan biasa dalam mana-mana rangka kerja web ialah mahukan komponen anak dapat memancarkan peristiwa kepada komponen induknya. Ini akan membolehkan pengikatan data dua hala.

Contohnya ialah menghantar data daripada komponen input kepada borang induk.

Sintaks untuk memancarkan peristiwa adalah berbeza bergantung pada sama ada kami menggunakan API Pilihan atau API Komposisi.

Dalam Options API, kita boleh panggil ini sahaja.$emit(eventName, payload): 

export default {
  methods: {
    handleUpdate() {
      this.$emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
  }
}
Salin selepas log masuk

Walau bagaimanapun, Composition API tidak mempunyai ini. Sebaliknya, kami boleh mengakses kaedah emit secara langsung menggunakan kaedah persediaan Vue3.

Parameter kedua kaedah persediaan ialah pembolehubah konteks, yang mengandungi tiga atribut: attrs, slot dan emit.

Selagi objek konteks diimport, emit boleh dipanggil dengan parameter yang sama seperti API Pilihan. 

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Salin selepas log masuk

Salah satu cara untuk mengemaskan kod anda ialah menggunakan penstrukturan objek untuk mengimport pancaran secara langsung. Ia kelihatan seperti ini. 

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Salin selepas log masuk

Sama ada kami menggunakan API Pilihan atau API Komposisi, komponen induk kami mendengar acara tersuai dengan cara yang sama. 

<HelloWorld @update=&#39;inputUpdated&#39;/>
Salin selepas log masuk

Jika kaedah yang kita pancarkan juga lulus nilai, kita boleh menangkapnya dalam dua cara berbeza - bergantung pada sama ada kita bekerja sebaris atau menggunakan kaedah lain.

Pertama, kita boleh menggunakan nilai $event yang diluluskan dalam templat. 

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>
Salin selepas log masuk

Kedua, jika kami menggunakan kaedah untuk mengendalikan acara, nilai yang diluluskan akan dihantar secara automatik kepada kaedah kami sebagai parameter pertama. 

<HelloWorld @update=&#39;inputUpdated&#39;/>

        

            

                
Tutorial Popular

                Lagi>
                
            

            

                

                    
Tutorial berkaitan 

                    
Cadangan popular

                    
Kursus terkini

                

                
                
                
            

            
        


        

            

                
Muat turun terkini

                Lagi>
                
            

                        
            

                

                    
kesan web 

                    
Kod sumber laman web

                    
Bahan laman web

                    
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！