<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> //app为父组件，传值给子组件 <ul><todo-item v-for="item of list" :item="item"></todo-item></ul> </div> <script> //定义全局组件 // Vue.component("TodoItem",{ // props:["item"], // template:`<li >{{item}}</li>` // }) //定义局部组件 var TodoItem={ props:["item"], template:`<li >{{item}}</li>` } var app=new Vue({ el:"#app", data:{ list:['a1a','b1b'] }, //局部组件要在这里注册 components:{ TodoItem } }) </script> </body> </html>
父子，子父，同级传值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <!-- app为父组件，传值给子组件 ：itme相当于 v-bind --> <!-- <ul><zujian v-for="item of list" :item="item"></zujian></ul> --> <!-- 子组件传值给父组件，接收事件ziinfo --> <!-- <zichuanfu @ziinfo="accept"></zichuanfu> --> <boycompt></boycompt> <girlcompt></girlcompt> </div> <script> //定义全局组件 // Vue.component("TodoItem",{ // props:["item"], // template:`<li >{{item}}</li>` // }) //定义局部组件 // var zujian={ // props:["item"], // template:`<li >{{item}}</li>`, // data(){ // return{ // info:'我是子组件' // } // } // } // var zichuanfu={ // props:["item"], // template:`<button @click="send">send</button>`, // data(){ // return{ // info:'我是子组件' // } // }, // methods:{ // send:function(){ // this.$emit('ziinfo',this.info) // } // } // } //同级使用bus传值 一个bus.$emit发送，一个bus.$on监听 var bus=new Vue() var boycompt={ props:["item"], template:`<button @click="send">send</button>`, data(){ return{ info:'我是子组件' } }, methods:{ send:function(){ bus.$emit('boy',this.info) } } } var girlcompt={ template:`<div>{{msg}}</div>`, data(){ return{ msg:"" } }, created:function(){ var me=this bus.$on('boy',function(info){ me.msg=info }) } } var app=new Vue({ el:"#app", data:{ list:['a1a1','b1b1'] }, methods:{ accept:function(info){ console.log(info) } }, //局部组件要在这里注册 components:{ boycompt, girlcompt } }) </script> </body> </html>