Vue.js父子通信之所有方法和数据共享
<!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.onload=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.子数据/方法名()