vue.js基础之简单的组件传值_vue组件传值简写-优快云博客

本文链接：https://blog.youkuaiyun.com/hdb2405474279/article/details/119415165

v-bind 简写：

v-on 简写 @

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script><!-- 引入vue -->
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="inputValue"/><!-- 双向绑定 -->
			<button v-on:click="handleBtnClick">提交</button><!-- 绑定事件 -->
			<ul>
				<!-- <li v-for="item in list">{{item}}</li>循环list数据 -->
				<todo-item v-bind:content="item"
				:index="index"
				 v-for="(item,index) in list"
				 @shuju="handleItemDelete">
				 </todo-item>
			</ul>
		</div>
		<script>
		//全局组件
		// Vue.component("TodoItem",{
		// 	props:['content'],//接收v-bind绑定的content
		// 	template:"<li>{{content}}</li>"
		// })
		
		//局部组件，需要在根vue实例里面components说明
		var TodoItem = {
			props:['content','index'],
			template:"<li @click='handleTtemClick'>{{content}}</li>",//绑定点击事件
			methods:{
				handleTtemClick:function(){
					this.$emit("shuju",this.index);//接收点击哪个数据的值
				}
			}
		}
		
			var app = new Vue({
				el:'#app',
				components:{
					TodoItem:TodoItem,
				},
				data:{
					list:[],
					inputValue:''
				},
				methods:{
					handleBtnClick:function(){//点击button使用此函数
						this.list.push(this.inputValue)//数组新增数据
						this.inputValue = ''//每提交一次清空输入框内容
					},
					handleItemDelete:function(index){
						this.list.splice(index,1)//实现点击删除数据
					}
				}
			})
		</script>
	</body>
</html>