vueセントラルイベントバス

最近のプロジェクトの問題

兄弟コンポーネント通信

コンポーネント前進リフレッシュ、後退

リフレッシュしない
1.コンポーネント通信
親子コンポーネント間でデータを渡すサブコンポーネントはpropsを介して親コンポーネントからデータを受け取るが、兄弟コンポーネント間でデータを渡す場合はフレームワークvuexを用いることができ、膨大な単一ページアプリケーションではないとあまり適切ではないため、vue公式サイトは中央イベントバスという方法を提供している.

//      Bus.vue  ,new    vue     
export default new Vue({
    name: 'bus',
    data () {
        return {
            // code
        }
    }
})

//              

//        A
<tempalte>
    <button @click="sendMessage"    B     button>
tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentA',
        data () {
            return {
                msg: 'the message is from componentA'
            }
        },
        methods: {
            sendMessage () {
                //        B        inceptMessage(       )
                //    A    B        Bus           ,     
                //     ,    A    Bus       inceptMessage       ,   B          A         
                Bus.$emit('inceptMessage', this.msg)
                // Bus        B  inceptMessage    msg      ,       B        A          
            }
        }
    }
script>

//        B
<tempalte>
    //      A       
    <h1>{{ fromComponentAMsg }}h1>
tempalte>
<script>
import Bus from 'Bus.vue'
    export default {
        name: 'componentB',
        data () {
            return {
                fromComponentAMsg: ''
            }
        },
        methods: {

        },
        mounted () {
            //        B      A            ,      Bus            
            // bus       B,    A     inceptMessage         msg
            Bus.$on('inceptMessage',(msg) => {
                this.fromComponentAMsg = msg
            })
        }
    }
script>

2 . コンポーネントが更新され、更新されない
vue公式サイトで提供されている方法の1つは、keep-aliveを介してrouter-viewを包むことで、コンポーネントが元のデータをリフレッシュ表示しないことを実現することですが、コンポーネントの中では一般的に更新データが戻ったときに元のデータをリフレッシュせずに保持し、ユーザー体験を増やし、検索を通じて1つの方法を発見しました.

export default {
    name: 'xxx',
    data () {
        //...
    },
    deactivated () {
     this.$destroy()
   },
   methods: {
    // ...
    }
}

$destroyはインスタンスを完全に破棄します.他のインスタンスとの接続をクリーンアップし、すべてのコマンドとイベントリスナーをバインド解除します.これでデータを再更新できます
3 . その他

人民元フォーマット変換

GitHubのjavascriptブラックテクノロジーの文章から見た方法

文字列が空であるかどうかを検出する

var str = ''
if (str === ''){
    //  
}
------------
var str0 = 'testStr'
if (!!str){
    //    
}
var str1 = ''

if (!!str1) {
    //  
}