如何將變量的值從組件1發送到組件2？ （vue.js 2）

Question

我的觀點是這樣的：

<div class="row"> 
    <div class="col-md-3"> 
     <search-filter-view ...></search-filter-view> 
    </div> 
    <div class="col-md-9"> 
     <search-result-view ...></search-result-view> 
    </div> 
</div> 

我的搜索過濾器視圖分量是這樣的：

<script> 
    export default{ 
     props:[...], 
     data(){ 
      return{ 
       ... 
      } 
     }, 
     methods:{ 
      filterBySort: function (sort){ 
       this.sort = sort 
       ... 
      } 
     } 
    } 
</script> 

我的搜索結果-視圖分量是這樣的：

<script> 
    export default { 
     props:[...], 
     data() { 
      return { 
       ... 
      } 
     }, 

     methods: { 
      getVueItems: function(page) { 
       ... 
      } 
     } 
    } 
</script> 

欲排序參數（filterBySort方法，部件中的一個），以getVueItems方法的顯示值（組分2）

我該怎麼辦？

Answer 1

我會詳細說明Serge引用的內容。在Vue v1中，組件可能只是向全世界發送消息，而其他人可能只是傾聽並採取行動。在Vue2中，更加明確的是更加明確。

您需要做的是創建一個單獨的Vue實例作爲可用於您的兩個現有組件的信使或通信總線。實施例（使用ES5）：

// create the messenger/bus instance in a scope visible to both components 
var bus = new Vue(); 

// ... 

// within your "result" component 
bus.$emit('sort-param', 'some value'); 

// ... 

// within your "filter" component 
bus.$on('sort-param', function(sortParam) { 
    // ... do something with it ... 
}); 

對於除簡單的組件到組件通信Vuex（Vue公司的同等陣營的終極版的）應進行調查更爲複雜的問題。