Vue56-组件的自定义事件

作者 : admin 本文共253个字,预计阅读时间需要1分钟 发布时间: 2024-06-17 共1人阅读

一、什么是自定义事件 

Vue56-组件的自定义事件插图

二、子组件—【传值】—>父组件 

2-1、prop属性

Vue56-组件的自定义事件插图(1)

Vue56-组件的自定义事件插图(2) Vue56-组件的自定义事件插图(3)

 

2-2、自定义事件

v-on在谁身上,就给谁绑定事件!

Vue56-组件的自定义事件插图(4)

给谁绑定的事件,想触发就找谁!

Vue56-组件的自定义事件插图(5)

2-3、prop属性VS自定义属性

Vue56-组件的自定义事件插图(6)

2-4、简写形式

Vue56-组件的自定义事件插图(7) 

2-5、ref属性实现

Vue56-组件的自定义事件插图(8)

加了ref属性,则App.vue的实例对象,就能通过ref得到student组件的实例对象!

Vue56-组件的自定义事件插图(9) 

Vue56-组件的自定义事件插图(10) 

app.vue挂载完毕,就能得到student的实例对象!

$on:当xxx的时候

好处:灵活性强!

Vue56-组件的自定义事件插图(11)

2-7、自定义事件只触发一次 

Vue56-组件的自定义事件插图(12)

或者

Vue56-组件的自定义事件插图(13)

2-8、当触发自定义事件的时候,想要传很多数据

Vue56-组件的自定义事件插图(14)

Vue56-组件的自定义事件插图(15)

Vue56-组件的自定义事件插图(16)

本站无任何商业行为
个人在线分享 » Vue56-组件的自定义事件
E-->