自定义事件 vue,vue在什么情况下需要用到自定义事件?
本文主要详细介绍Vue组件中的自定义事件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
介绍主要组件自定义事件的概念和用法。
何为组件自定义事件：
自定义事件是组件之间的一种通信方式，方向是子组件===父组件。使用场景：A是子组件，B是父组件。如果要将B的数据转移到A，可以使用props配置项。如果要将A的数据转移到B，需要使用组件自定义事件或者使用props加回调函数。使用props加回调函数实现子组件到父组件的数据传递。
main.js
//引入vue依赖
从“vue”导入Vue
//引入组件App
从导入应用程序。/App.vue
//关闭生产提示
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
//这个我还没学会。要知道他的作用是把app放进容器里。
render: h=h(App)，
//为这个vue实例配置管理id为app的容器。
}).$ mount(“# app”)
App.vue:
模板
！-写作结构-
差异
！-将回调函数传递给子组件School -
school:getschoolnamefromsoolvc= getschoolnamefromsoolvc /school
整点
学生/学生
Div获取学校子组件的学校名称：{{schoolNameFromSchool}}/div
/div
/模板
脚本
//原简介
//从导入学校。/School.vue
//从导入学生。/Student.vue
//修改后的
//介绍学校组件和学生组件，涉及es模块化的语法。
从导入学校。/components/School.vue
从导入学生。/components/Student.vue
导出默认值{
data() {
返回{
学校名称FromSchool:“”
}
},
组件：{
//注册组件
学校，
学生
},
方法：{
//定义一个回调函数，并将其传递给子组件School
getSchoolNameFromSchoolVc(学校名称){
Console.log(App获取学校子组件的学校名称：，School name
//将其分配给schoolNameFromSchool
this . schoolName from school=school name；
}
}
}
/脚本
风格
/风格
schoo.vue:
模板
！-写组件结构代码，也就是html代码-
！-你需要一个div把它括起来，也就是只能有一个根元素。通常，使用一个div
橙色
学校：{ {学校名称}}/div
Div地址：{ {学校地址}}/div
！-//定义一个按钮，点击将学校名称传递给App组件。-
将学校名称传递给应用程序组件/按钮
/div
/模板
脚本
//写交互代码的地方，需要暴露，引入其他地方。
//这个需要了解一点es6模块化的知识。通常，这里使用默认公开，因为这是一个单文件组件，只需要公开一个组件对象，
//而且引入默认公开的组件引入语法更简单。
导出默认值{
data() {
返回{
校名：“尚硅谷”，
学校：“北京”
}
},
//接收回调函数
道具：[ getschoolnamefromsoolvc ]，
方法：{
sendsoolnametoapp(){
//调用回调函数，传入学校名称
this . getschoolname from school VC(this . schoolname)
}
}
}
/脚本
样式范围
/*在那里书写样式*/。橙色{
背景色：橙色；
}
/风格
学生. vue:
模板
！-写组件结构代码，也就是html代码-
！-你需要一个div把它括起来，也就是只能有一个根元素。通常，使用一个div
橙色
Div名称：{ {学生名称}}/div
Div年龄：{ {学生年龄}}/div
/div
/模板
脚本
//写交互代码的地方，需要暴露，引入其他地方。
//这个需要了解一点es6模块化的知识。通常，这里使用默认公开，因为这是一个单文件组件，只需要公开一个组件对象，
//而且引入默认公开的组件引入语法更简单。
导出默认值{
data() {
返回{
学生姓名：“张三”，
学生年龄：18岁
}
},
}
/脚本
风格
/*在那里书写样式*/。橙色{
背景色：灰色；
}
/风格
这种方式的流程：
1.在父组件(App)中定义一个回调方法，并将其传递给子组件(School)。
回调方法是在App组件的对应区域渲染学校组件传递的学校名称。
2.子组件通过使用props配置项接收回调函数，并编写一个按钮，点击后调用回调函数将数据传递给App组件。
效果：
第二种方式是使用组件自定义事件实现：
使用组件自定义事件实现将子组件Student的学生姓名传输到App组件并呈现。
分一下步骤：
3.在父组件应用程序中，设置自定义事件并配置事件回调。
4.在子组件中，触发自定义事件并传递值。
效果：
除了在组件标签中绑定自定义事件，还可以在用ref属性挂载的生命周期回调函数$中绑定它们。
执行效果是一样的。
自定义事件仍然可以使用一次事件修饰符。
使用props或组件自定义事件将数据从子组件传输到父组件是类似的。
Props是直接把回调函数传递给子组件调用。
组件自定义事件通过事件公开回调函数，然后子组件触发事件达到调用回调函数的效果。
解绑组件自定义事件：
或者当组件被销毁时，这些自定义事件也会被销毁。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。