Vue组件之间的传值

要求：将输入框的内容显示在列表框，并点击列表删除

一、父向子传值：props:[]

二、子向父传值：this.$emit()

//父组件
<div id='root'>
       <input v-model="inputValue"/>
      <button @click='handleSubmit'>提交</button>//点击按钮将输入框内容作为li显示
　　<ul>
　　　　<todo-item 
　　　　　　v-for='(item,index) of list'
　　　　　　:content='item'//将item作为属性传递给子组件todo-item 
　　　　　　:index='index'//将index作为属性传递给子组件todo-item 
　　　　　　@delete='handleDelete'//监听子组件传递过来的delete事件名
　　　　>
　　　　</todo-item>
　　</ul>
</div>
<script>
//子组件
Vue.component('todo-item',{ 
　　props:['content','index'],//接收传递过来的属性
　　template:'<li @click="handleClick">{{content}}</li>',
　　methods:{
　　　　handleClick:function(){
　　　　　　this.$emit('delete',this.index)//将delete事件名及index属性传递给父组件
　　}
　　}
})

new Vue({
　　el:'#root',
　　data:{
　　inputValue:'',
　　list:[]
　　},
　　methods:{
　　　　handleSubmit:function(){
　　　　　　this.list.push(this.inputValue)
　　　　　　this.inputValue=''//清空输入框
　　　　},
　　　　handleDelete:function(index){
　　　　this.list.splice(index,1);
　　　　}
　　}
})
</script>