深圳瑞捷成立新公司,重庆网站优化软件,河南建设厅网站首页,89点班组建设网站defineEmits 属性#xff1a;用于创建自定义事件#xff0c;接收子组件传递过来的数据。
注意#xff1a;如果自定义事件的名称#xff0c;和原生事件的名称一样#xff0c;那么只会触发自定义事件。
defineEmits 仅适用于 setup 语法糖#xff0c;其它写法请见#x…defineEmits 属性用于创建自定义事件接收子组件传递过来的数据。
注意如果自定义事件的名称和原生事件的名称一样那么只会触发自定义事件。
defineEmits 仅适用于 setup 语法糖其它写法请见《Vue3 子传父 组件传参 emit》 语法格式
// 子组件创建自定义事件传递数据
const emit defineEmits([自定义事件]);
emit(自定义事件, 数据1, 数据2);// 父组件绑定自定义事件接收数据
组件标签 自定义事件函数名/组件标签const 函数名 (参数1, 参数2) {console.log(参数1, 参数2);
}基础使用
一、子组件创建自定义事件传递数据。
templateh3我是子组件/h3
/templatescript setup
import { ref } from vue;
let name ref(张三);
// 创建 myEvent 自定义事件
const emit defineEmits([myEvent]);
// 使用 myEvent 自定义事件传递数据
emit(myEvent, name.value, 999);
/script二、父组件给组件标签绑定自定义事件接收数据。
templateh3我是父组件/h3p{{ title }}/phr /!-- 绑定 myEvent 自定义事件 --Child myEventadd/Child
/templatescript setup
import Child from ../components/Child;
import { ref } from vue;
let title ref();
// 创建事件函数接收数据
const add (name, num) {title.value name;console.log(我是父组件, name, num);
}
/script注子组件使用自定义事件后父组件中的事件函数会自动执行。 原创作者吴小糖
创作时间2023.12.15
