vue 自定义事件
2023-09-27 14:29:15 时间
引自:https://www.cnblogs.com/xshan/p/12341906.html
当子组件需要向父组件传递数据时,就要用到自定义事件。v-on指令除了监听DOM事件外,还可以用于组件之间的自定义事件。
在JS的设计模式—观察者模式中有dispatchEvent和addEventListener这个两个方法。
Vue组件也有类似的一套模式,子组件用 $ emit()来触发事件,父组件用$ on()来监听子组件的事件。
父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。
当我们需要在操作组件后引起组件之外的元素发生变化时,就需要是这里的内容。比如:当选中书后,自动显示您选中的书名。其中书籍列表是使用组件写的。显示选中书籍名是在组件之外。
在添加事件的时候需要注意一下事项:
1、在定义组件时`Vue.component(组件名,{props(参数),template(html代码),methods(子组件中的事件),}`,
在子组件中正常调用该事件,但是在需要与父组件联系时,需要在该事件中写第2条的信息。
2、在需要出发事件的时候,调用`this.emit('事件的名称',参数(可以是多个))
3、在使用这个组件的时候,绑定下事件,语法和之前绑定是一样的,比如:@father-click="FatherClick",
@事件名称=父组件中事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue组件中自定义事件</title> </head> <body> <div id="app"> <child-template v-for="book in books" :book="book" @father-click="FatherClick"></child-template> <p>你选中了:{{checkbooks}}</p> </div> <script> Vue.component("child-template", { props: ['book'], template: ` <div> <label>{{book.title}}</label> <input type="checkbox" @click="onCheck" > </div> `, methods: { onCheck() { // 将子组件与父组件联合起来 this.$emit('father-click', this.book) } }, }) new Vue({ el: "#app", data: { books: [{ title: '水浒传', }, { title: '三国演义', }, { title: '西游记', }, { title: '红楼梦', }, ], checkbooks: [] }, methods: { 'FatherClick'(bookName) { // indexOf:获取某个元素在数组中的位置,如果返回值为非负数,那么就是存在,就是下标 // 否则,代表这个元素在数组中不存在 let booknameIndex = this.checkbooks.indexOf(bookName.title) if (booknameIndex >= 0) { this.checkbooks.splice(booknameIndex, 1) } else { this.checkbooks.push(bookName.title) } } } }) </script> </body> </html>
相关文章
- 基于Vue的音乐播放器的设计与实现(论文+源码)_kaic
- Vue 搜索案例:gitHub 用户搜索案例
- Vue中 TodoList 示例: 浏览器本地存储、自定义事件
- webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!
- vue中使用Object.assign导致视图不响应
- vue在render函数中如何实现v-model和事件绑定(4)
- vue 组件之纯表格渲染--没有事件交互
- Vue学习笔记之Vue学习前的准备工作
- Vue绑定事件
- vue中鼠标事件
- Vue中this.$options.data()和this.$data知多少?
- vue自定义移动端touch事件之点击、滑动、长按事件
- vue中Cannot read property '_wrapper' of undefined 报错
- vue渲染函数&JSX
- 关于vue自定义事件中,传递参数的一点理解
- vue 指令 v-if v-bind onClick 阻止多个点击事件
- vue.js 事件机制
- Vue.js 2使用中的难点举例--子组件,slot, 动态组件,事件监听
- Vue-bus中央事件总线插件
- vue核心概念
- Vue全家桶+Mint-Ui打造高仿QQMusic,搭配详细说明