什么是通信

通信是組件或模塊之間的資料互動，多重通信就形成了資料流，資料流管理的優劣決定了產品能否上線，資料流（通信）越混亂，代碼越難維護，

在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://www.cnblogs.com/wang622/archive/2022/07/18/"https://cdn.jsdelivr.net/npm/[email protected]/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架構中用的最多的一種通信方案，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499670.html

標籤：其他

上一篇：Vue初探

下一篇：【html+css】總結七種垂直水平居中的辦法

Vue通信