Vue2.6-父子组件之间值传递

最新推荐文章于 2024-07-11 09:05:40 发布

置顶东陵十三

最新推荐文章于 2024-07-11 09:05:40 发布

阅读量300

点赞数 1

分类专栏：计算机前端开发文章标签： Vue2.6 组件之间值传递父组件子组件

本文链接：https://blog.csdn.net/donglingjiu/article/details/100322716

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

父组件->子组件

v-bind:index = 'key' 简写 :index='key'

遍历list的时候将每一项的值赋值给value 每一项的下标赋值给key 把value值通过v-bind绑定到变量 content上把key值通过v-bind绑定到变量 index上传递给to-do-list组件

子组件->父组件

通过 this.$emit('delete',this.index) ; 向外触发 delete事件并传参this.index 父组件监听delete事件获取到当前下标

v-on:delete="handleItemDelete" 简写 @delete="handleItemDelete"

<!DOCTYPE html>
<html>
	<head>
		<title>delete_todolist</title>
		<meta charset="UTF-8"/>

		<script src="./vue.js"></script>
	</head>

	<body>
		<div id='app'>
			<input type='text' v-model="inputValue"/>
			<button @click="handleBtnClick">submit</button>
			<ul>
                                <!-- v-bind:content='value' 简写 :content='value' 
                                     v-on:delete="handleItemDelete" 简写 @delete="handleItemDelete"
-->
				<to-do-list :content='value' 
							:index = 'key'
							v-for="(value,key) in list"
							@delete="handleItemDelete">
				</to-do-list>
			</ul>
		</div>

		<script>
			var ToDoList = {
				props:['content','index'],
				template:"<li @click='handleItemDelete'>{{content}}</li>" ,
				methods:{
					handleItemDelete:function() {
						//alert(this.index) ;
						this.$emit('delete',this.index) ;
					}
				}
			}

			var app = new Vue({
				el:"#app" ,
				components:{
					ToDoList:ToDoList
				},
				data:{
					list:[] ,
					inputValue:''
				},
				methods:{
					handleBtnClick:function() {
						this.list.unshift(this.inputValue) ;
						this.inputValue = '' 
					},
					
					handleItemDelete:function(index) {
						//alert(index) ;
//splice函数  从指定下标开始删除  第二个参数 删除几位
						this.list.splice(index,1) ;
					}
				}
			}) 
		</script>
	</body>
</html>