父组件与子组件的相互传值——以todolist为例

<div id=‘app‘>
		<input type=‘text‘ v-model="inputValue"/> <!--双向绑定-->
		<button @click="handleBtn">Submit</button> <!--注册事件,即v-on:click-->
		<ul> <!--v-bind:content（父组件向子组件传值）-->
		<todo-item v-bind:content="item" v-bind:index="index" v-for="(item, index) in list" @delete="handleDelete"></todo-item>
		</ul>
	</div>

	<script>
		var TodoItem={
			props:[‘content‘,‘index‘],
			template:"<li @click=‘handleLi‘>{{content}}</li>",
			methods:{
				handleLi:function(){
					this.$emit("delete",this.index) //$emit向外触发delete事件，然后在父组件监听
					//（子组件向父组件传值）
				}
			}
		}
		var app = new Vue({
			el: ‘#app‘, //接管范围
			components: {
				TodoItem:TodoItem
			},
			data: {     
				list: [],
				inputValue: ‘‘
			},
			methods: {
				handleBtn:function() {
					this.list.push(this.inputValue)
					this.inputValue=‘‘  //清除文本框内容
				},
				handleDelete:function(index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>