非父子元件之間傳值(Bus/匯流排/釋出訂閱模式/觀察者模式)

chenBJ發表於2021-06-25
元件模式
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>非父子元件傳值(Bus/匯流排/釋出訂閱模式/觀察者模式)</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--使用vuex 或者匯流排機制來解決非父子元件傳值-->
<!--案例說明：點選Dell的時候Lee，當點選Lee的時候Dell 變成Lee

兩個不相關的元件之間的傳遞
-->
    <div id="app">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    Vue.prototype.bus = new Vue()


    Vue.component('child',{
        data(){
            return {
                selfContent: this.content
            }
        },
        props:{
          content:String
        },
        template:'<div @click="handleClick">{{selfContent}}</div>',
        methods:{
            handleClick(){

                //1.我要把當前this.content傳給另一個元件
                this.bus.$emit('change',this.selfContent)
            }
        },
        mounted(){
            var this_ = this
            //2.監聽bus中的change時間
            //3.注意：我們不能修改父元件傳過來的值例如content，我們在data中定義屬性，把this.content如存入進去，我們來操作這個屬性即可
            this.bus.$on('change',function (msg) {
                this_.selfContent = msg
            })
        }
    })
    let app = new Vue({
        el:"#app",

    })

</script>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章