父组件像子组件传值
通过v-bind传递给子组件,子组件通过props对象接受绑定变量
子组件像父组件传值
通过this.$emit("delete",this.index),用方法携带参数向外传递,外部通过事件监听来出发新的事件进行获取。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单的组件传值</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="todoValue"/> <button @click="handleBtnClick">提交</button> </div> <ul> <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete"> </todo-item> </ul> </div> <script> var TodoItem={ props:['content','index'], template:"<li @click='handleItemClick'>{{content}}</li>", methods:{ handleItemClick:function(){ this.$emit("delete",this.index); } }, } var app=new Vue({ el:"#root", components:{ TodoItem:TodoItem }, data:{ todoValue:"", list:[] }, methods:{ handleBtnClick:function(){ this.list.push(this.todoValue) this.todoValue="" }, handleItemDelete:function(index){ this.list.splice(index,1) } } }) </script> </body> </html>