企业网站设计目的和意义,免费静态网页托管,WordPress的目录大纲,四川外国语大学网站建设引言 子组件通过$emit触发事件#xff0c;并传递数据#xff0c;父组件在使用子组件时就可以绑定子组件事件#xff0c;在事件处理函数中拿到子组件传来的数据
子组件传递数据
函数声明#xff1a;$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的…引言 子组件通过$emit触发事件并传递数据父组件在使用子组件时就可以绑定子组件事件在事件处理函数中拿到子组件传来的数据
子组件传递数据
函数声明$emit(事件名, 传递的数据 . . .) 子组件传递的数据会依次传递给父组件的事件函数
使用
① 在html标签中使用
直接执行$emit()函数即可
!-- 子组件名为search --
templateview classrootinput typetextview classsearch click$emit(search, 100)搜索/view/view
/template
② 在 js 代码中使用 通过defineEmits()函数定义事件 拿到返回对象触发事件
!-- 子组件名为search --
templateviewview classrootinput typetextview classsearch clicksearch搜索/view/view/view
/template
script setupimport {defineEmits} from vue;// 定义事件const emit defineEmits([search])// 触发事件的函数const search () {// 触发该组件的search事件emit(search, 100)}
/script
父组件接收数据
绑定子组件定义的事件通过事件处理函数的参数获取传来的数据
templateview classroot!-- 绑定事件函数 --search searchgetSearchData/search/view
/template
script setupconst getSearchData (data) {// 拿到子组件传递来的数据console.log(data)}
/script
