<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>parentChildComponent</title> <script src="js/vue.js"></script><template id="parent">
<div> I am parent component !{ {msg}};I accept :{ {msg2}} <hr> <child ref="child"></child> </div> </template><template id="child">
<div> I am child component !{ {msg}};I accept :{ {msg2}} </div> </template></head>
<body> <script> window.οnlοad=function(){ let child={ template:'#child', data(){ return { msg:'Data of child !', msg2:'' } }, mounted(){ this.msg2=this.$parent.msg; } }; let parent={ template:'#parent', components:{ child }, data(){ return { msg:'Data of parent !', msg2:'' } }, mounted(){ this.msg2=this.$refs.child.msg } }; new Vue({ el:'#app', components:{ parent } }); } </script> <div id="app"> <parent></parent> </div></body></html>打通父子之间所有数据和方法的共享：
父模板：<child ref="子名称"></child> 父访问子: 父组件: this.$refs.子名称.子数据/方法名() 子访问父: 子组件: this.$parent.子数据/方法名()