天天看點

vue 非父子元件之間傳值

由于剛使用完,再次進行記錄,以後要用可以直接看。

百度看到這篇文章,然後進行了使用。https://www.jianshu.com/p/8e705bb0bb4b

但是我沒有建立中間的bus啥的,可能不标準吧。

使用過程如下:

CityTradeArea.vue加入如下代碼:

created(){
            this.$root.$on('change_city_trade_area_content',(val) => {
                //console.log("ok nice"+val);
                this.chooseCity_all(val);
            });
        },
        beforeDestroy(){
            this.$root.$off('change_city_trade_area_content');
        },
           

這部分代碼是用來監聽change_city_trade_area_content函數的調用。

再定義一個觸發change_city_trade_area_content()的函數。

Search.vue元件中,點選搜尋會觸發一個方法。我是在這個方法中觸發CityTradeArea中的監聽函數。

do_search() { // 做搜尋
        if(this.city_name) {
        // 直接調用在cityTradeArea中監聽的方法。
        this.$root.$emit('change_city_trade_area_content', this.city_name);
        }else {
          this.$Message.warning('請先選擇城市再進行搜尋!');
        }
        
      },
           

然後this.cityname就是傳過去的參數。

另外網上也有說使用vuex來調用的,沒進行嘗試。