VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成

最新推荐文章于 2023-06-04 23:19:19 发布
最新推荐文章于 2023-06-04 23:19:19 发布
阅读量155 收藏
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/122804285
版权

VUE学习(十五)、组件自定义事件及todoList案例自定义事件完成

项目文件

在这里插入图片描述

组件的自定义事件

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

  4. 第一种方式，在父组件中：<Demo @zuijin="test"/> 或 <Demo v-on:zuijin="test"/>

  5. 第二种方式，在父组件中：

    <Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('zuijin',this.test)
}

  6. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  7. 触发自定义事件：this.$emit('zuijin',数据)

  8. 解绑自定义事件this.$off('zuijin')

  9. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  10. 注意：通过this.$refs.xxx.$on('zuijin',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

一、School组件

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="sendSchoolName">把学校名给App</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		props:['getSchoolName'],
		data() {
			return {
				name:'xxx大学',
				address:'北京',
			}
		},
		methods: {
			sendSchoolName(){
				this.getSchoolName(this.name)
			}
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

二、Student组件

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>当前求和为：{{number}}</h2>
		<button @click="add">点我number++</button>
		<button @click="sendStudentlName">把学生名给App</button>
		<button @click="unbind">解绑zuijin事件</button>
		<button @click="death">销毁当前Student组件的实例(vc)</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods: {
			add(){
				console.log('add回调被调用了')
				this.number++
			},
			sendStudentlName(){
				//触发Student组件实例身上的zuijin事件
				this.$emit('zuijin',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				this.$off('zuijin') //解绑一个自定义事件
				// this.$off(['zuijin','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

三、App.vue

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @zuijin="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<!-- 
			.native是为了告诉组件这是一个原生的dom事件,不是自定义事件
		-->
		<Student ref="student" @click.native="show"/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('zuijin',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('zuijin',this.getStudentName) //绑定自定义事件（一次性）
		},
	}
</script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
</style>

四、todoList案例自定义事件

1、MyFooter组件

<template>
	<div class="todo-footer" v-show="total">
		<label>
			<!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
			<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
			<span>已完成{{doneTotal}}</span> / 全部{{total}}
		</span>
		<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
	</div>
</template>

<script>
	export default {
		name:'MyFooter',
		props:['todos'],
		computed: {
			//总数
			total(){
				return this.todos.length
			},
			//已完成数
			doneTotal(){
				//此处使用reduce方法做条件统计
				/* const x = this.todos.reduce((pre,current)=>{
					console.log('@',pre,current)
					return pre + (current.done ? 1 : 0)
				},0) */
				//简写
				return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
			},
			//控制全选框
			isAll:{
				//全选框是否勾选
				get(){
					return this.doneTotal === this.total && this.total > 0
				},
				//isAll被修改时set被调用
				set(value){
					// this.checkAllTodo(value)
					this.$emit('checkAllTodo',value)
				}
			}
		},
		methods: {
			/* checkAll(e){
				this.checkAllTodo(e.target.checked)
			} */
			//清空所有已完成
			clearAll(){
				// this.clearAllTodo()
				this.$emit('clearAllTodo')
			}
		},
	}
</script>

<style scoped>
	/*footer*/
	.todo-footer {
		height: 40px;
		line-height: 40px;
		padding-left: 6px;
		margin-top: 5px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>

2、MyHeader组件

<template>
	<div class="todo-header">
		<input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'MyHeader',
		data() {
			return {
				//收集用户输入的title
				title:''
			}
		},
		methods: {
			add(){
				//校验数据
				if(!this.title.trim()) return alert('输入不能为空')
				//将用户的输入包装成一个todo对象
				const todoObj = {id:nanoid(),title:this.title,done:false}
				//通知App组件去添加一个todo对象
				this.$emit('addTodo',todoObj,1,2,3)
				//清空输入
				this.title = ''
			}
		},
	}
</script>

<style scoped>
	/*header*/
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>

3、MyItem组件

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
            <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <span>{{ todo.title }}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name: "MyItem",
    //声明接收todo、checkTodo、deleteTodo
    props: ["todo", "checkTodo", "deleteTodo"],
    methods: {
        //勾选or取消勾选
        handleCheck(id) {
            //通知App组件将对应的todo对象的done值取反
            this.checkTodo(id);
        },
        //删除
        handleDelete(id) {
            if (confirm("确定删除吗？")) {
                //通知App组件将对应的todo对象删除
                this.deleteTodo(id);
            }
        }
    }
};
</script>

<style scoped>
/*item*/
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

li:hover {
    background-color: #ddd;
}

li:hover button {
    display: block;
}
</style>

4、MyList组件

<template>
    <ul class="todo-main">
        <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
    </ul>
</template>

<script>
import MyItem from "./MyItem";

export default {
    name: "MyList",
    components: { MyItem },
    //声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的
    props: ["todos", "checkTodo", "deleteTodo"]
};
</script>

<style scoped>
/*main*/
.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
}

.todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
}
</style>

5、App.vue

<template>
    <div id="root">
        <div class="todo-container">
            <div class="todo-wrap">
                <!-- 组件自定义事件 -->
                <MyHeader @addTodo="addTodo" />
                <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
                <MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo" />
            </div>
        </div>
    </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyList from "./components/MyList";
import MyFooter from "./components/MyFooter.vue";

export default {
    name: "App",
    components: { MyHeader, MyList, MyFooter },
    data() {
        return {
            //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
            todos: JSON.parse(localStorage.getItem("todos")) || []
        };
    },
    methods: {
        //添加一个todo
        addTodo(todoObj) {
            this.todos.unshift(todoObj);
        },
        //勾选or取消勾选一个todo
        checkTodo(id) {
            this.todos.forEach((todo) => {
                if (todo.id === id) todo.done = !todo.done;
            });
        },
        //删除一个todo
        deleteTodo(id) {
            this.todos = this.todos.filter((todo) => todo.id !== id);
        },
        //全选or取消全选
        checkAllTodo(done) {
            this.todos.forEach((todo) => {
                todo.done = done;
            });
        },
        //清除所有已经完成的todo
        clearAllTodo() {
            this.todos = this.todos.filter((todo) => {
                return !todo.done;
            });
        }
    },
    watch: {
        todos: {
            deep: true,
            handler(value) {
                localStorage.setItem("todos", JSON.stringify(value));
            }
        }
    }
};
</script>

<style>
/*base*/
body {
    background: #fff;
}
.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}
.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}
.btn:focus {
    outline: none;
}
.todo-container {
    width: 600px;
    margin: 0 auto;
}
.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>
心醉瑶瑾前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
嘤嘤鸭的博客
11-28 543
Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布
vue-vue2脚手架7-组件的自定义事件
飘然渡沧海的博客
11-15 741
vue-vue2脚手架7-组件的自定义事件 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/> 第二种方式，在父组件中： <Demo ref="demo"/> ...... mounted()
Vue —— 进阶脚手架（四）（组件的自定义事件）
HuoZhiyan 的博客
05-15 827
组件的自定义事件
Vue2.0 Vue脚手架 组件自定义事件_绑定
yasinawolaopo的博客
12-20 784
Vue2.0 Vue脚手架 Vue自定义事件_绑定
Vue2.0 Vue脚手架 自定义事件_解绑
yasinawolaopo的博客
12-20 165
Vue2.0 Vue脚手架 自定义事件_解绑
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue3+ts入门（todolist案例）
02-10
- **Props 和 emits 的类型安全**：使用 `PropType` 和 `emitsOptions` 可以为组件的 props 和自定义事件添加类型定义，确保数据传递的正确性。 - **更好的 IDE 支持**：TypeScript 与 Vue3 结合使用，可以提供更...
vue-todolist案例
03-08
这个案例涵盖了Vue的基础知识，包括组件化开发、数据绑定、事件处理等核心概念。 1. **组件化开发**：Vue的核心特性之一就是组件化，它允许我们将UI拆分成独立、可重用的部件。在`src`目录下，我们可能找到名为`...
vue2案例todolist
05-23
在本Vue2案例“todolist”中，我们将深入探讨Vue.js框架的核心概念和技术，以便创建一个简单的待办事项管理应用。Vue.js是一个轻量级、高性能的前端JavaScript框架，广泛用于构建用户界面。以下是该案例涉及的主要...
Vue实现todolist删除功能
08-27
接下来是Vue组件的定义，这里我们有一个名为`todo-item`的自定义组件： ```js Vue.component('todo-item', { props: ["content", "index"], template: "<li @click='handleSubmit'>{{ content }} {{ index }}...
Vue组件之间通信（props、自定义事件、全局事件总线、消息订阅与发布、Vuex）
花生吃花生的学习记录
10-31 1003
Vue组件之间的通信是使用组件中常用的部分。介绍几种常用的组件之间通信方式。 一、使用props配置项 props配置项主要应用与父组件与子组件进行通信。父组件------>子组件 使用方法：在组件标签中绑定属性或者方法。在子组件中使用props配置项来接收父组件传递过来的数据。 父组件中： <template> <div id="app"> <!-- 父组件给子组件传递数据，动态绑定。 --> <!-- 子组件使用props来
vue-自定义事件
xie__jin__cheng的博客
06-12 220
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-自定义事件</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <
Vue中父子组件间如何通过事件进行通信
Ghost__H的博客
05-09 381
1.子组件通过事件和父组件进行通信 由于Vue中单向数据流的概念，父组件传递给子组件的值，子组件只能展示不能修改，所以需要使用事件与父组件通信修改父组件中的值 const app = Vue.createApp({ data(){ return {count:2} }, methods:{ hanldeAddOne(){ this.count +=1;
12道vue高频原理面试题,你能答出几道?
weixin_40664002的博客
01-13 1114
Vue 响应式原理 vue-reactive 核心实现类: Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。 Watche...
vue点击事件改变样式_Vue友们就靠这6个开发技巧了（建议收藏）
weixin_39554021的博客
12-12 5881
前言在平时的开发中，我们用vue可能很久了，但是对于有的新特性或者技巧没有发现，本文就带着大家一起看看常用的vue技巧。(温馨提示：代码片段点击图片阅读体验更佳噢！)一、状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Obse...
Vue 操作摇杆实现
weixin_45412353的博客
06-04 398
最近接了一个展厅类的外包项目，里面有个小机器人需要用摇杆控制移动，在网上找了一下，没有找到想要的组件，于是就自己写了一个。
【Vue组件间通信】 全局事件总线、订阅与发布
yzq0820的博客
08-16 2302
其中小明组件自定义“getName”,需要传递给小红组件，小红组件就需要“getName”来接收，也可以销毁传递。一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。下面代码所演示的是，小明组件给小红组件姓名“小明”，小红组件给小明组件“年龄”，主要通过。通过订阅与发布的方式，小明组件给小红组件姓名，小红组件给小明组件年龄。创建两个子组件，如下组件，...
Vue中 使用定时器 （setInterval、setTimeout）
热门推荐
用心创作每一篇文章
10-02 2万+
开始的时候创建了一个定时器 setInterval ，时间间隔为2秒，每2秒都会调用一次函数 valChange，从而使 value 的值+1。js中定时器有两种，一个是循环执行 setInterval，另一个是定时执行 setTimeout。顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会循环执行这个方法,直到这个定时器被销毁掉；开始时候创建一个定时器 setTimeout，只在2秒后执行一次方法。定时执行 setTimeout 是设置一个时间，等待时间到达的时候。
Vue2——组件的自定义事件
mantou_riji的博客
07-20 3597
我们也可以定义组件的自定义事件，这样定义出来的事件是给组件用的。父组件定义自定义事件和触发的函数
vue2父组件解绑自定义事件
最新发布
07-11
在Vue 2中，要解绑父组件上的自定义事件，可以使用`$off`方法。以下是解绑自定义事件的步骤： 1. 在父组件中，首先需要给子组件绑定自定义事件。例如，假设自定义事件是`myEvent`，可以在子组件中使用`$emit`方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

心醉瑶瑾前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值