上海网站设计专注乐云seo,网站正在建设中代码,吉林seo推广,网站建设林晓东组件上的自定义事件是和组件的自定义属性一样#xff0c;都是模仿HTML正常的标签#xff0c;由组件给出事件句柄#xff0c;由使用组件的父组件提供事件处理函数。组件自定义事件真正触发的地方是在组件模板的标签上#xff0c;组件自己不提供事件处理函数#xff0c;将这…组件上的自定义事件是和组件的自定义属性一样都是模仿HTML正常的标签由组件给出事件句柄由使用组件的父组件提供事件处理函数。组件自定义事件真正触发的地方是在组件模板的标签上组件自己不提供事件处理函数将这个处理函数给出一个定义将这个定义抛给使用组件的父组件由父组件给出。子组件其他处理函数可以通过组件自定义事件的定义调用这个函数。依照面向对象编程设计的原则属性自定义事件具有依赖倒置的原则即依赖抽象不依赖具体。 组件自定义事件示例
script setup langts
const propsdefineProps{msg: string,count:number,show:boolean,list:string[],pfun:Function
}()
const emitsdefineEmits{(e:wait,time:number):void(e:change):void(e:append,str:string):void
}()let test(){props.pfun();emits(wait,2000);return props.pfun is called, emits wait is called;
}
console.log(test())
/scripttemplatediv click$emit(change)div{{ count }}/divdiv click$emit(wait,1000){{ msg }}/divdiv click$emit(wait){{ show }}/divdiv click$emit(append,appstr){{ list }}/div/div
/template
组件使用示例
script setup langts
import {ref} from vue
import HelloWorld from ./components/HelloWorld.vueconst hlistref([hello,wrold,vue]);
const countref(10);function hpfun(){console.log(The value is from father component function);return The value is from father component function;
}function waitOnHelloWorld(time:number){console.log(wait for time seconds);count.valuetime;console.log(count is count.value);
}function appendToList(appstr:string){hlist.value.push(appstr);console.log(append is working);
}function changeHW(){console.log(change happens)
}
/scripttemplateHelloWorld :pfunhpfun changechangeHW appendappendToList(world) waitwaitOnHelloWorld(10) :countcount msgYes, You did it! :showtrue :listhlist/HelloWorld
/template
从以上案例中可以得出结论
1、组件的自定义事件可以设置调用时函数的形参类型、形参个数
2、组件定义时可以在模板上绑定自定义事件事件参数可以添加也可以不添加这些参数都不起作用
3、组件使用时只有父组件为组件的自定义事件绑定了事件处理函数组件上事件才会有效果
4、父组件提供事件处理函数可以提供组件自定义事件规定的参数也可以提供、不提供、提供超过形参个数的参数
5、组件自定义事件以父组件实际使用时为组件提供的事件处理函数为准
