Selami acara tersuai dalam komponen Vue

Apakah acara tersuai komponen? Artikel ini akan memberi anda pemahaman yang mendalam tentang acara tersuai dalam komponen Vue dan membincangkan perkara yang perlu diberi perhatian tentang acara tersuai, saya harap ia akan membantu anda.

Acara tersuai komponen ialah kaedah komunikasi antara komponen, yang sesuai untuk komponen anak menghantar data atau tingkah laku kepada komponen induk . (Belajar perkongsian video: tutorial vuejs)

Rajah skematik

Nota tentang acara tersuai komponen:

• 1 Acara tersuai komponen melaksanakan fungsi komunikasi antara komponen anak dan komponen induk Oleh itu, tindakan mengikat acara tersuai perlu diselesaikan dalam induk komponen

• 2 Tindakan pencetus acara tersuai komponen perlu diselesaikan dalam subkomponen Sesiapa yang mengikat acara akan dicetuskan

Sebelum memahami peristiwa tersuai komponen, kami juga mempelajari tentang props juga boleh melaksanakan props komponen anak untuk berkomunikasi dengan komponen induk Seterusnya, saya akan beralih daripada kepada Tersuai komponen acara, supaya semua orang dapat lebih memahami acara tersuai komponen, dan anda juga boleh membandingkan perbezaan dan persamaan antara kedua-dua kaedahprops

Komunikasi antara komponen melalui prop

Dalam App.vue:

<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from &#39;./components/TestA&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;App组件收到了数据&#39;, name)
			},
		},
	}
</script>

Kaedah

dalam getName() dalam coretan kod digunakan untuk menerima parameter yang diluluskan oleh subkomponen name参数

TestA.vue:

<!--通过点击事件传递数据-->
<button @click="sendName">将姓名发送给App组件</button>
...
...
<script>
export default {
    name:&#39;TestA&#39;,
    //接收父组件传递过来的props
    props:["getName"],
    data(){
        return{
            name:&#39;路飞&#39;,
            age:18
        }
    },
    methods:{
        sendName(){
            //点击按钮后，触发此方法，传递name给父组件
            this.getName(this.name)
        }
    }
}
</script>

Di atas ialah sub-komponen yang menghantar data kepada komponen induk menggunakan prop

Perenderan adalah seperti berikut :

Kesan permulaan halaman:

Selepas mengklik butang:

Sebagai boleh dilihat daripada gambar , apabila butang diklik, konsol mengeluarkan data yang diterima oleh komponen induk, dan komponen anak menghantar data kepada komponen induk melalui

props

Antara- komunikasi komponen dilaksanakan melalui acara tersuai komponen

Langkah pertama adalah untuk mengikat acara tersuai kepada komponen Seperti yang dinyatakan pada permulaan artikel, acara tersuai mengikat dilakukan dalam komponen induk.

Kedua, dalam subkomponen, peristiwa tersuai perlu dicetuskan untuk melengkapkan komunikasi acara tersuai komponen:

Rendering Seperti berikut:

Kesan permulaan halaman:

Selepas mengklik butang:

Lulus Seperti yang dapat dilihat daripada gambar, apabila diklik, konsol mengeluarkan data yang diterima oleh komponen induk.

Melalui dua kaedah komunikasi di atas, kita boleh mendapati bahawa komponen anak menghantar data kepada komponen induk melalui kaedah

props Premisnya ialah komponen induk perlu menghantar fungsi panggil balik kepada komponen anak Hanya selepas komponen menerima ia boleh menghantar data kepada komponen induk Peristiwa tersuai komponen hanya perlu memanggil kaedah untuk mencetuskan peristiwa tersuai yang ditentukan $emit untuk menghantar data. kepada komponen induk.

Mata pengetahuan lain tentang acara tersuai komponen

Cara kedua untuk menyesuaikan pengikatan komponen

App.vue :

<template>
	<div class="app">
		<h1 id="msg">{{msg}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<TestA :getName="getName"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <!--方法二-->
		<TestB ref="testb"/>
	</div>
</template>

<script>
import TestA from &#39;./components/TestA&#39;
import TestB from &#39;./components/TestB&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA, TestB},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;我收到了数据&#39;, name)
			},
			send(name){
				console.log("send被调用了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on(&#39;demo&#39;, this.send);
		}
	}
</script>

<style scoped>
.app{
	background-color: rgb(162, 255, 139);
	padding: 15px;
}
</style>

mendapat

melalui atribut ref dan selepas komponen dipasang (dilekapkan), gunakan TestB组件组件的实例对象（vc） untuk melengkapkan pengikatan peristiwa tersuai subkomponen , kesan yang sama boleh dicapai. this.$refs.组件名.$on('自定义事件名', 回调函数)

Selain itu, kaedah ini lebih fleksibel dan boleh menyelesaikan beberapa operasi, seperti acara tersuai sekali, kelewatan, pertimbangan, dsb.

Acara tersuai sekali

v-on:事件名.once="XXXX
或者
this.$refs.student.$once("事件名", 事件内容)

Menyahikat acara tersuai

Apabila kami selesai menggunakan acara tersuai Selepas acara itu, anda boleh menyahjilid acara tersuai Kelebihan melakukan ini adalah untuk meminimumkan penggunaan prestasi program dan meningkatkan kecekapan operasi program

Tindakan tidak mengikat tersuai juga dilakukan dalam sub-komponen,

Ringkasnya, anda boleh membuka ikatannya kepada sesiapa sahaja yang terikat.

Dalam UjianB

<template>
  <div>
      <h2 id="籍贯-native">籍贯：{{native}}</h2>
      <h2 id="详细地址-adress">详细地址：{{adress}}</h2>
      <button @click="sendNative">点击触发自定义事件</button>
      <button @click="noBand">解绑自定义事件</button>
  </div>
</template>

<script>
export default {
    name:&#39;TestB&#39;,
    data(){
        return{
            native:&#39;东海&#39;,
            adress:&#39;东海风车村&#39;
        }
    },
    methods:{
        sendNative(){
            this.$emit(&#39;demo&#39;,this.native)
        },
        //解绑demo自定义事件
        noBand(){
            this.$off(&#39;demo&#39;);
        }
    }
    
}
</script>

<style scoped>
div{
    background-color: aquamarine;
    padding: 15px;
    margin-top: 5px;
}
</style>

Perkara lain ialah, jika Ada ialah banyak acara tersuai yang perlu dilepaskan, supaya anda boleh menulis:

{方法体内
    this.$off();
}

直接不用传递任何参数，这样写的话，只要是给此组件绑定的任何自定义事件都会解绑。

总结

以上内容就是组件的自定义事件的使用，自定义事件虽然在Vuejs中不是一个非常重要的点，但是也是一个实际开发中比较常用的点，在进行某些业务操作时，使用自定义事件可能会节省开发时间以及优化代码，减少代码冗余量，组件自定义事件的具体操作还要看所处的业务逻辑和行为是什么。

如果觉得内容不错的话，记得点赞收藏~~~

（学习视频分享：web前端开发）

Atas ialah kandungan terperinci Selami acara tersuai dalam komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!