Vue.js组件的通信之子组件向父组件的通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>componentChildToParentCommunication</title>
<script src="js/vue.js"></script>
</head>
<template id="parentComp">
<div>
I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}}
<hr>
<child :m1="msg1" :m2="msg2"></child>
</div>
</template>
<template id="childComp">
<div>I am child component:{{msg}}</div>
</template>
<body>
<script>
let child={
template:'#childComp',
data(){
return {
msg:'child Data'
}
},
props:['m1','m2']
};
let parent={
template:'#parentComp',
data(){
return {
mgs:'parent Data',
msg1:'the first parent Data',
msg2:'the second parent Data'
}
},
components:{
child
},
};
window.onload=function(){
new Vue({
el:'#app',
components:{
parent
}
});
}
/*子元素向父元素通信关键总结:
1:子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据
2:在嵌套的子元素(使用时)上:<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
*/
</script>
<div id="app">
<parent></parent>
</div>
</body>
</html>
最新文章
- java集合——题4,6
- spring 配置触发器
- PLSQL执行sql语句输出的中文是???之解决方法和步骤
- ERROR ITMS-90049错误解决
- Yii render和renderPartial的区别
- Linux下安装 TestLink常见问题解决方法
- row cache lock
- CSS3控制元素排列
- poj1111 DFS
- 使用jvisualvm远程监控Java程序
- CentOs 7 中安装tomcat8
- iis读取不到本地证书问题
- 原生js实现平滑滚动
- 25 python 初学(socket,socketserver)
- 我的第二本译作《精通OpenStack》上架啦:前言、目录和样章
- caffe-ssd的GPU安装时make test 报错:.build_release/test/test_all.testbin:
- 分布式监控系统Zabbix-3.0.3--短信报警设置
- 一个死循环导致的栈溢出实例:StackOverFlowError
- verilog语法实例学习(8)
- RabbitMQ(1) 核心概念