<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试父子之间通信</title>
<script type="text/javascript" src="lib/boot.js"></script>
<style>
.box{
width:100%;
max-width:640px;
margin:40px auto;
border:1px solid #ccc;
padding:20px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 定义 -->
<child :msg-data="msg"></child>
</div>
<script>
var tx = function(){
// 父组件
var child = {
template:`
<div class="box" name="cs-slot">slot用法</div>
<div class="box">
<i-button @click="send()">获取数据</i-button>
<i-button @click="cancel" type="primary">取消数据</i-button>
<div>
<ul>
<li v-for="item in msgData">名称：{{item.name}}---id：{{item.id}}</li>
</ul>
</div>
</div>
`,
data:function(){
return {
msgData:[]
}
},
events:{
getv:function(val){
this.msgData = val;
},
clearV:function(val){
this.msgData = [];
}
},
methods:{
send:function(){
this.$dispatch(‘getList‘,‘hellow kitty‘);//调用events父类方法
},
cancel:function(){
this.$dispatch(‘clearList‘,‘hellow kitty‘);//调用events父类方法
}
}
}
return new Vue({
el:‘#app‘,
data:{
msg:[]
},
events:{
getList:function(val){
this.msg = [{name:‘百度‘,id:‘001‘},{name:‘百威‘,id:‘002‘},{name:‘腾讯‘,id:‘003‘}];
this.$broadcast(‘getv‘,this.msg);//调用events子类方法
},
clearList:function(){
this.$broadcast(‘clearV‘,‘‘);//调用events子类方法
}
},
components:{
child:child
}
})
}()
</script>
</body>
</html>
时间： 2025-01-02 18:36:42