事件A发送：Event.$emit（‘发送方法’,‘发送数据’）
事件C接受：Event .$on("（监听事件）",data=>{
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<template id="mya">
<div>
<h5>a组件</h5>
<input type="button" value="send a" @click="send">
<hr>
</div>
</template>
<template id="myc">
<div>
<h5>c组件</h5>
{{usernamec}}
</div>
</template>
<div id="app">
<mya></mya>
<myc></myc>
</div>
<script>
let Event = new Vue();
Vue.component('mya',{
template:`#mya` ,
data(){
return {
}
} ,
methods:{
send(){
Event.$emit('senda',"this is from a")
}
}
})
Vue.component('myc',{
template:`#myc`
,
data(){
return {
usernamec:'username c'
}
} ,
mounted(){
/*第一种写法（传统的js写法）*/
/* let that = this
console.log(this)
Event.$on('senda',function (data) {
console.log(data)
console.log(this)
that.usernamea = data //因为此时调用this指向的是Event事件
})*/
/*第二种 (ES6写法)*/
Event .$on("senda",data=>{
this.usernamec = data
})
}
})
new Vue({
el:'#app',
data:{
} ,
component:{
mya ,myc
}
})
</script>
</body>
</html>
7289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
