网站建设方案书怎么写,网站正在建设页面,凉山州建设厅官方网站,wordpress添加小说emit 属性#xff1a;用于创建自定义事件#xff0c;接收子组件传递过来的数据。
注意#xff1a;如果自定义事件的名称#xff0c;和原生事件的名称一样#xff0c;那么只会触发自定义事件。
setup 语法糖写法请见#xff1a;《Vue3 子传父 组件传参 defineEmits》 语…emit 属性用于创建自定义事件接收子组件传递过来的数据。
注意如果自定义事件的名称和原生事件的名称一样那么只会触发自定义事件。
setup 语法糖写法请见《Vue3 子传父 组件传参 defineEmits》 语法格式
// 子组件创建自定义事件传递数据
emits: [自定义事件],
// 组合式 API 使用
setup(props, context) {context.emit(自定义事件, 数据1, 数据2);
},
// 选项式 API 使用
this.$emit(自定义事件, 数据1, 数据2);// 父组件绑定自定义事件接收数据
组件标签 自定义事件函数名/组件标签
// JS 代码
const 函数名 (参数1, 参数2) {console.log(参数1, 参数2);
}组合式 API 写法
一、子组件创建自定义事件传递数据。 templateh3我是子组件/h3
/templatescript
import { ref } from vue;
export default {// 创建自定义事件 myEventemits: [myEvent],setup(props, context) {let name ref(张三);// 使用 myEvent 自定义事件传递数据context.emit(myEvent, name.value, 999);return {};},
};
/script注需要在 setup 函数中接收一个 context 参数才能在 JS 中使用。
二、父组件给组件标签绑定自定义事件接收数据。
templateh3我是父组件/h3p{{ title }}/phr /!-- 绑定自定义事件 --Child myEventadd/Child
/templatescript
import Child from ../components/Child;
import { ref } from vue;
export default {components: { Child },setup() {let title ref();// 接收数据const add (name, num) {title.value name;console.log(我是父组件, name, num);}return { title, add }}
}
/script注子组件使用自定义事件后父组件中的事件函数会自动执行。
三、最终效果。 原创作者吴小糖
创作时间2023.12.15
