例子一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script type="text/javascript" src="vue.min.js"></script> </head> <body> <div id="app"> {{message}} <son-component v-for="post in posts" :title="post.title" :key="post.id" @e-world="getData"></son-component> </div> <script > Vue.component('son-component',{ data:function(){ return{ sondata:"子数据" } }, methods:{ send(){ // console.log(this); //此处的this表示当前子组件实例 this.$emit('e-world',this.sondata); //使用$emit()触发一个事件，发送数据 } } , props:['title'], template:'<div> <h4>子组件接收父组件的数据是：{{title}}</h4> <button @click="send">将子组件的数据向上传递给父组件</button> <input v-model="sondata"></input> </div>' }) new Vue({ el:'#app', data:{ message:1, posts:[ {id:1,title:'标题一'}, {id:2,title:'标题二'}, {id:2,title:'标题三'} ], postFontSize:1 }, methods:{ getData(mes){ this.message=mes; } } }) </script> </body> </html>
例子二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件及组件间数据传递</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <my-hello></my-hello> </div> <template id="hello"> <div> <h3>我是hello父组件</h3> <h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3> <h3>访问子组件的数据：{{sex}},{{height}}</h3> <hr> <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world> </div> </template> <template id="world"> <div> <h4>我是world子组件</h4> <h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4> <h4>访问自己的数据：{{sex}},{{height}}</h4> <button @click="send">将子组件的数据向上传递给父组件</button> </div> </template> <script> var vm=new Vue({ //根组件 el:'#itany', components:{ 'my-hello':{ //父组件 methods:{ getData(sex,height){ this.sex=sex; this.height=height; } }, data(){ return { msg:'网博', name:'tom', age:23, user:{id:9527,username:'唐伯虎'}, sex:'', height:'' } }, template:'#hello', components:{ 'my-world':{ //子组件 data(){ return { sex:'male', height:180.5 } }, template:'#world', // props:['message','name','age','user'] //简单的字符串数组 props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值 message:String, name:{ type:String, required:true }, age:{ type:Number, default:18, validator:function(value){ return value>=0; } }, user:{ type:Object, default:function(){ //对象或数组的默认值必须使用函数的形式来返回 return {id:3306,username:'秋香'}; } } }, methods:{ send(){ // console.log(this); //此处的this表示当前子组件实例 this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据 } } } } } } }); </script> </body> </html>