vue中非父子組件的傳值bus的使用

時間 2020-05-21

標籤 vue 中非父子組件 bus 使用简体版

原文原文鏈接

非父子之間的組件傳值，能夠使用vuex。簡單的狀態管理，也能夠用vue bushtml

vue bus能夠實現不一樣組件間、不一樣頁面間的通訊，好比我在A頁面出發點擊事件，要B頁面發生變化，使用方法以下：vue

全局定義：main.jsvuex

window.eventBus = new Vue()

在A頁面的事件中觸發：

eventBus.$emit('todo', '123')

在B頁面的created中開始監聽，越早監聽越好：

eventBus.$on('todo', (params) => {

console.log(params)

})

下面我來一個例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子組件傳值（bus/總線/發佈訂閱模式/觀察者模式）</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script> Vue.prototype.bus = new Vue(); Vue.component('child',{ data:function(){ return { selfContent:this.content } }, props:{ content:String }, template:'<div @click="handleClick">{{selfContent}}</div>', methods:{ handleClick:function(){ //因爲bus是vue的一個實例，因此它有$emit這個方法,change就是一個隨意的名字，能夠改爲aaa
                this.bus.$emit('change',this.selfContent) } }, mounted:function(){ var this_= this; this.bus.$on("change",function(msg){ this_.selfContent=msg; }) } }) var vm= new Vue({ el:'#app', data:{}, methods:{ }, }) </script>
</body>
</html>

固然也能夠參考一些其餘人的博客，注意理解app

https://www.jianshu.com/p/5b383e66c117 this

http://www.cnblogs.com/fanlinqiang/p/7756566.htmlspa

相關標籤/搜索