思路：
思路是什么呢！！！
它和父组件传值的原理，稍微相似， 假如：一个one 组件，一个 two组件； one组件需要用$on 监听， two 组件 创建一个button 按钮 用$emit 关键词传值等等
第一步：在静态页面： 创建一个div ,然后创建一个自定义的<father></father> 标签；
第二步： 在script里边创建一个 空的容器 const eventBus=new Vue({})
第三步：用component 重新定义一个father 的组件名，在里边插入两个自定义标签：一个<one></one> 一个<two></two> 等等
不多说了，直接上代码吧！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div class="app">
<father></father>
</div>
<script>
//创建空的容器
const eventBus = new Vue({
})
//定义一个新的vue组件,就是自定义的元素
Vue.component("father", {
//1.组件名为father
template: `
<div class="father">
我是父祖件
<one></one>
<two></two>
</div>
`
})
//定义新的组件名字
Vue.component("one", {
//组件名为one
data() {
return {
oneVal: ""
}
},
template: `<div class="one">
<span>我是one组件</span>
<h1>这是我要传入的值{{oneVal}}</h1>
</div>
`,
//相当于父子传参的 原理差不多
//需要用$on 进行监听自定义的事件,在回调函数可以拿到数据
mounted() {
//mounted 在这里发送后端请求 ,拿回数据 ,配合路由
eventBus.$on("setVal", (res) => {
this.oneVal = res
})
}
})
//定义一个two
Vue.component("two", {
data() {
return {
Val: "这是我要赋予你的能量"
}
},
template: `
<div class="two">
<span>我是two组件</span>
<h1>这是我要赋给你的能量 ： {{val}}</h1>
<button @click="fn">点我传递给one 能量</button>
</div>
`,
methods: {
fn() {
eventBus.$emit("setVal", this.Val)
}
}
})
//创建容器其
const vm = new Vue({
el: ".app"
})
</script>
</body>
</html>