<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件通信</title>
<link rel="stylesheet" href="src/dist/styles/iview.css">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="src/dist/vue.min.js"></script>
<script src="src/dist/iview.min.js"></script>
<style>
*{
box-sizing:border-box;
}
.header,.footer{
width:1200px;
height:60px;
border:1px solid #ccc;
text-align:center;
line-height:60px;
margin:0 auto;
}
.footer{
position:absolute;
left:50%;
margin-left:-600px;
bottom:0;
}
.main{
width:1200px;
margin:0 auto;
min-height:400px;
border:1px solid #ccc;
margin-top:20px;
padding:20px;
}
</style>
</head>
<body>
<div id="page">
<cc-header :ppt01="ppt01"></cc-header>
<div class="main">
<h2><i-button @click="sendHeader">父向子(header)传数据</i-button></h2>
<ul>
<li v-for="item in list">{{item}}</li>
<li>{{ppt02 || ‘---‘}}</li>
</ul>
</div>
<cc-footer @change02="aceptFooter"></cc-footer>
</div>
<script>
var hub = new Vue();
Vue.component(‘ccHeader‘,{
template:‘<div class="header"> 我是header---------{{ppt01 || "==="}} <i-button @click="sendFooter">发送给footer</i-button> </div>‘,
data:function(){
return {
hh:‘‘
}
},
props:[‘ppt01‘],
methods:{
sendFooter:function(){
alert(‘ccc‘)
hub.$emit(‘change01‘,this.ppt01)
}
}
})
Vue.component(‘ccFooter‘,{
template:‘<div class="footer"> 我是fooer----------{{ff || "==="}} <i-button @click="sendFather">发送给父亲</i-button> </div>‘,
data:function(){
return{
ff:‘abcd‘
}
},
methods:{
sendFather:function(){
this.$emit(‘change02‘,this.ff)
}
},
created:function(){
var self = this;
hub.$on(‘change01‘,function(val){
self.ff = val;
})
}
})
var vm = new Vue({
el:‘#page‘,
data:{
list:[‘1‘,‘2‘,‘3‘],
ppt01:‘‘,
ppt02:‘‘
},
methods:{
sendHeader:function(){
this.ppt01 = ‘呵呵‘;
},
aceptFooter:function(val){
alert(val+‘来自footer‘);
this.ppt02 = val;
}
}
})
</script>
</body>
</html>
时间： 2024-08-07 17:01:28