vue同級コンポーネント値転送(同ページ)

4035 ワード

vue同級コンポーネント値転送(同ページ)
  • 新規busバス
  • トリガBus.$emit
  • 傍受Bus.$on

  • 新しいbusバス
    メールでjsの下に新しいbusを作成します.js
    import Vue from 'vue'
    export default new Vue();
    

    トリガBus.$emit
    <template>
    	<div @click="onfocus"></div>
    </template>
    
    <script>
        import Busfrom '@/bus.js'
        
    	export default{
    		methods:{
    	    	onfocus:function(fromid){
    		    	Bus.$emit('getisshow',"      ,            ")
    		     }
    	    }
    	}
    </script>
    

    傍受Bus.$on
    ブログ設定ページに行って、好きなコードシートのハイライトスタイルを選択し、同じハイライト を表示します.
    <script>
        import Bus from '@/bus.js'
        
    	export default{
    		created(){
    			Bus.$on('getisshow',data => {
    				console.log(data)   //    data "      ,            "
    			})
    		}
    	}
    </script>
    

    ページのコンポーネントが値を取得できない場合と同様に、トリガとリスニングのオブジェクトがジャンプに遭遇して値が取得されない場合と同じかどうかを確認し、リスニング関数がトリガ関数の前に存在するかどうかを確認します.このリンクをジャンプして表示できます.https://blog.csdn.net/LJH111101/article/details/84663360