Vue.js父子通信之所有方法和数据共享
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>parentChildComponent</title>
<script src="js/vue.js"></script>
<template ></child>
</div>
</template>
<template >
<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 >
<parent></parent>
</div>
</body>
</html>
打通父子之间所有数据和方法的共享：
父模板：<child ref="子名称"></child>
父访问子: 父组件: this.$refs.子名称.子数据/方法名()
子访问父: 子组件: this.$parent.子数据/方法名()
- 上一篇 »linux下IPC通信
- 下一篇 »javascript和php使用ajax通信传递JSON
