<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div id="app"> <huahua></huahua> <shuandan></shuandan> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
var Event = new Vue(); //时间调度去,两个组件之间通信应该有一个中间人 Vue.component("huahua",{ template:` <div>我说：<input @keyup="on_change" type="text" v-model="i_sad"></div> `, methods:{ on_change:function () { Event.$emit("huahua-said-something",this.i_sad) //这里的this.i_sad相当于吧一个组件发的信号串到另一个区 } }, data:function () { return { i_sad:"", } } }); Vue.component("shuandan",{ template:‘<div>花花说：{{huahua_said}}</div>‘, data:function () { return { huahua_said:"" } }, mounted:function () { var me = this; Event.$on("huahua-said-something",function (data) { //on 表示监听一个事件 console.log(data); me.huahua_said = data }) } }); new Vue({ el:"#app" });
