<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> ???</head> ???<body> ???????<div id="app1"> ???????????<com-a></com-a> ???????????<com-b></com-b> ???????????<com-c></com-c> ???????????</div> ???????????</body> ???<script> ???????var A={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件A</span> -->{{a}} ???????????????????<input type ="button" value ="把A数据传给C"> ???????????????</div> ???????????`, ???????????data(){ ???????????????return{ ???????????????????a:‘我是a数据‘ ???????????????} ???????????} ???????}; ???????var B={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件B</span> -->{{b}} ???????????????????<input type ="button" value ="把B数据传给C"> ???????????????</div> ???????????`, ???????????data(){ ???????????????return{ ???????????????????b:‘我是b数据‘ ???????????????} ???????????} ???????????????????}; ???????var C={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件C</span> -->{{c}} ???????????????????<input type ="button" value ="把C数据传给A"> ???????????????</div> ???????????`, ???????????data(){ ???????????????return{ ???????????????????c:‘我是c数据‘ ???????????????} ???????????} ???????}; ???????????????var app =new Vue({ ???????????el:"#app1", ???????????data:{ ???????????????????????????????????a:‘我是父组件的数据‘ ???????????????????????????????????????????????????????????}, ???????????/*//子组件,利用props进行数据传递:*/ ???????????components:{ ???????????????‘com-a‘:A, ???????????????‘com-b‘:B, ???????????????‘com-c‘:C ???????????} ???????}); ???????</script></html>案例基础页面:
展示结果:
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> ???</head> ???<body> ???????<div id="app1"> ???????????<com-a></com-a> ???????????<com-b></com-b> ???????????<com-c></com-c> ???????????</div> ???????????</body> ???<script> ???????/*全局的*/ ???????var vm =new Vue(); ???????????????var A={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件A</span> -->{{a}} ???????????????????<input type ="button" value ="把A数据传给B" @click="send"> ???????????????</div> ???????????`, ???????????data(){ ???????????????return{ ???????????????????a:‘我是a数据‘ ???????????????} ???????????}, ???????????methods:{ ???????????????send(){ ???????????????????vm.$emit(‘a-msg‘,this.a) ???????????????} ???????????} ???????}; ???????var B={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件B</span> -->{{b}} ???????????????????<input type ="button" value ="把B数据传给C"> ???????????????</div> ???????????`, ???????????mounted(){ ???????????????vm.$on(‘a-msg‘,function(a){ ???????????????????alert(a); ???????????????????this.b =a; ???????????????????/*将this绑定给当前函数,引用当前函数*/ ???????????????}.bind(this)); ???????????}, ???????????data(){ ???????????????return{ ???????????????????b:‘我是b数据‘ ???????????????} ???????????} ???????????????????}; ???????var C={ ???????????template:` ???????????????<div> ???????????????????<span>我是组件C</span> -->{{c}} ???????????????????<input type ="button" value ="把C数据传给A"> ???????????????</div> ???????????`, ???????????data(){ ???????????????return{ ???????????????????c:‘我是c数据‘ ???????????????} ???????????} ???????}; ???????????????var app =new Vue({ ???????????el:"#app1", ???????????data:{ ???????????????????????????????????a:‘我是父组件的数据‘ ???????????????????????????????????????????????????????????}, ???????????/*//子组件,利用props进行数据传递:*/ ???????????components:{ ???????????????‘com-a‘:A, ???????????????‘com-b‘:B, ???????????????‘com-c‘:C ???????????} ???????}); ???????</script></html>之前结果:
传递之后的值:
vue.js组件之j间的通讯三,通过单一事件来管理组件通讯
原文地址：https://www.cnblogs.com/xiufengchen/p/10349480.html