修改TodoList增加点击删除功能（父子组件之间传值）学习笔记3

最新推荐文章于 2022-03-13 22:21:16 发布

Nineteen Hundred

最新推荐文章于 2022-03-13 22:21:16 发布

阅读量238

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/Vegetable_baicai/article/details/100007023

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

修改TodoList增加点击删除功能

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <input type="text" v-model="inputVale">
		    <button v-on:click="handBtnClick">提交</button>
		    <ul>
				<!-- v-bind绑定变量content=“item ” -->
				<Todo-Item v-bind:content="item" 
							v-bind:index="index"
							v-for="(item,index) in list"
							v-on:delete="handItemDelete">

				</Todo-Item>
		    </ul>
		</div>
		<script>
			//Vue.component全局组件定义了一个TodoItem组件,props定义一个接受外部传给的数据的变量
			// 	Vue.component('TodoItem',{
			// 	props:['content'],
			// 	template:"<li>{{this.content}}</li>"
			// })
			//定义一个局部变量,局部变量需要在Vue实例中进行注册
			
			var TodoItem = {
				//props后面接:而不是=
				props:['content','index'],
				//组件模板
				template:"<li @click='handItemClick'>{{content}}</li>",
				
				methods:{
					handItemClick:function(){
						this.$emit('delete',this.index);
					}
				}
				
			}
			
		    var app =new Vue({
				
		        el:'#app',
				components:{
					TodoItem: TodoItem
				},
		        data:{
		            list:[],
					inputVale:''
		        },
				methods:{
					handBtnClick:function(){
						//把输入框的数据传到list列表中
						this.list.push(this.inputVale)
						//为了在点击提交后清空输入框
						this.inputVale = ''
						
					},
					handItemDelete:function(index){
						this.list.splice(index,1)
					}
				}
		    })
		</script>
	</body>
</html>

##要点：
父组件向子组件传值：v-bind，子组件一定要接收
子组件向父组件传值：通过$emit（）通过事件触发向上一层触发事件，子组件触发的事件，父组件恰好在监听，就能获取子组件传来的内容，实现子组件向父组件传值的功能
##小提示
v-bind:index=“index” 可以简写成 :index=“index”( 省略了v-bind)

v-on:click=“delete” 可以简写成 @click=“delete”

Nineteen Hundred

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修改TodoList增加点击删除功能（父子组件之间传值）学习笔记3

修改TodoList增加点击删除功能代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>TodoList</title> <script src="vue.js"></script> </head>...
复制链接

扫一扫