欢迎来到沐沐的博客

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 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="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 id="app">
        <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架构中用的最多的一种通信方案。

 

posted @   前端小二&沐沐  阅读(332)  评论(1)  编辑  收藏  举报
相关博文：
·  vue2,vue指令和选项
·  Vue路由
·  vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理
·  Vue组件之间的通信方式都有哪些？
·  前端常见vue面试题（必备）
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae