Vue通信
什么是通信
通信是组件或模块之间的数据交互，多重通信就形成了数据流，数据流管理的优劣决定了产品能否上线，数据流（通信）越混乱，代码越难维护。
在Vue中常见的通信方式
父子组件通信
父传子使用自定义属性(props)，子传父使用自定义事件（$emit()）。
状态提示
当兄弟组件之间需要共享数据时，我们通常的做法是把这个数据定义它们的共同父组件中，在通过自定义属性实现数据共享。
provide/inject
这是组件树中，自上而下的一种数据通信方案，也就是只能父组件向后代组件传递。需要注意的是：当provide提供动态数据（声明式变量）时，动态数据发生变化，后代组件不会自动更新。
ref
ref是vue中一个内置属性，每一个html元素或组件都有这个属性，ref作用在组件上得到组件实例。使用ref访问组件实例，进一步可以访问组件中的数据和方法。（说明：ref是一种快速的DOM访问方式，当然ref可以作用在组件上得到组件实例，这些ref得到的DOM实例或组件实例，使用this.$refs来访问）
插槽通信
借助<slot>组件实现从子组件向父组件传递数据，借助this.$slots访问访问父组件中的插槽实例，在自定义组件使用this.$slots访问父组件的插槽实例；在父组件插槽中使用#default=‘scopet’访问子组件<slot>回传的数据
$parent/$children
借助$parent/$children可以实现在任一组件中访问组件树中的其它任意组件实例，可以做到在组件中随意穿梭。（$parent表示当前组件父组件实例，$children表示当前组件的子组件）
$attrs/$listteners
借助$attrs可以访问父组件传递过来的自定义属性（除class和style外）借助$listenrs可以访问父组件给的自定义事件，在某些场景下，$attrs与$listeners可以替代props/$emit()这种通信方案。
事件总线
借助vue内置的事件系统（$on/$emit()/$off/$once）实现“订阅-发布”通信，这种通信方式是一种与组件层级无关的“一对多”的通信。
<!DOCTYPE html>
<html >
<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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
#app{
display: flex;
}
.box{
width: 650px;
height: 400px;
border: 1px solid #333;
/* background-color: aqua; */
}
.msgbox{
width: 649px;
height: 100px;
position: relative;
}
.msgbox>input{
width: 580px;
height: 20px;
}
</style>
</head>
<body>
<div >
<el-user1></el-user1>
<el-user2></el-user2>
<!-- <div>
<div class="box"></div>
<div class="msgbox">
<input type="text">
<button>发送</button>
</div>
</div> -->
</div>
<script>
const bus = new Vue()
Vue.component('el-user1',{
template:`
<div>
<div class="box" v-html='content'></div>
<div class="msgbox">
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
</div>
</div>
`,
data(){
return{
msg:'',
content:''
}
},
mounted(){
bus.$on('elme',msg=>{
this.content += `<div>miss说:${msg}</div>`
})
},
methods:{
send(){
bus.$emit('el',this.msg)
this.msg = ''
}
}
})
Vue.component('el-user2',{
template:`
<div>
<div class="box" v-html='content'></div>
<div class="msgbox">
<input type="text" v-model='msg' @keyup.enter='send'>
<button @click='send'>发送</button>
</div>
</div>
`,
data(){
return{
msg:'',
content:''
}
},
mounted(){
bus.$on('el',msg=>{
this.content += `<div>me:${msg}</div>`
})
},
methods:{
send(){
bus.$emit('elme',this.msg)
this.msg = ''
}
}
})
const app = new Vue({
el:'#app'
})
</script>
</body>
</html>vuex通信
是vue架构中终极通信方案，也是vue架构中用的最多的一种通信方案。