<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同级传递</title>
</head>
<body>
<div id="app">
<son1></son1>
<son2></son2>
</div>
</body>
<script src="./vue.js"></script>
<script>
let nullVm=new Vue();
var vm=new Vue({
el:"#app",
components:{
"son1":{
data(){
return {
mes:[1,2]
}
},
template:"<p @click='get'>send</p>",
methods: {
get(){
nullVm.$emit("s1",this.mes)
}
},
},
"son2":{
template:"<p><p>",
mounted(){
// let that=this;
nullVm.$on("s1",function (params) {
console.log(params)
})
},
}
}
})
/*
一般同级传递都是指的是子组件与子组件之间的传递,因为父亲只有一个,那就是Vue实例。
如果想把son1的数据传给son2,
这里需要创建一个空实例Vue对象,然后利用事件方法
e
m
i
t
(
"
自
定
义
参
数
名
"
,
"
需
要
传
递
的
数
据
"
)
,
然
后
将
空
对
象
这
个
emit("自定义参数名","需要传递的数据"), 然后将空对象这个
emit("自定义参数名","需要传递的数据"),然后将空对象这个emit(),整体写在函数内。这样他的数据就会传出去了。谁来接受呢?另一个同级组件需要用钩子函数mounted,这个钩子函数的意思是初始化页面完成后,再对html的dom节点进行一些需要的操作。