Vue.js在另一個組件的組件中使用變量

Question

我有一個員工表。每個員工都有一個角色，我試圖用單選按鈕來過濾（例如單選按鈕管理員或superadmin）。

如何在另一個組件中使用組件內的變量？現在我有這樣的：

<template id="searchemployees"> 
     <div class="form-group"> 
      <label class="col-md-2 control-label">Filter</label> 

      <div class="col-md-10"> 
       <div class="radio radio-primary"> 
        <label> 
         <input type="radio" name="intern" id="intern" value="intern" v-model="selectedrole"/> 
         Toon alles 
        </label> 
       </div> 
       <div class="radio radio-primary"> 
        <label> 
         <input type="radio" name="employee" id="employee" value="employee" v-model="selectedrole"> 
         Stagiaire 
        </label> 
       </div> 
      </div>  
     </div> 
    </template> 

<template id="employees"> 
     <table class="table"> 
      <thead> 
      <tr> 
       <th>Logo</th> 
       <th>Bedrijfsnaam</th> 
       <th>Plaats</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr class="table-row-link" data-href="" v-for="employee in list | role selectedrole"> 
        <td><img class="img-circle-company" src=""/></td> 
        <td>@{{ employee.role.RoleName }}</td> 
        <td>@{{ employee.LastName }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </template> 

<script> 
     Vue.config.debug = true; 

     Vue.filter('role',function(value,role) 
     { 
      if(!role || 0 === role.length) 
      { 
       return value; 
      } 
      return value.filter(function(item) { 
       return item.role.RoleName == role 
      }); 
     }); 

     Vue.component('searchemployees', { 
      template: '#searchemployees' 
     }); 

     Vue.component('employees', { 
      template: '#employees', 
      props:['list'], 
      created() { 
       this.list = JSON.parse(this.list); 
      } 
     }); 

     new Vue({ 
      el: 'body' 
     }); 
</script> 

在我#searchemployees它需要正確的選擇的角色。但是我怎樣才能在#employees中爲我的過濾器使用它？

三江源

Answer 1

您應該能夠從一個組件通過調度事件向上發送屬性根/全球Vue的實例。調度一個事件意味着你正在向Vue樹中的組件父項發送一條消息，一條消息包含一個屬性。你發送使用下面的語法事件：

this.$dispatch('event-name', this.list); 

這表示，隨着event-name的ID發送一個事件，包含屬性this.list，以組件父。

如果您的組件的母公司正在偵聽ID爲event-name的確切消息，則它只能接收此派發的屬性。您可以使用下面的代碼父組件內監聽事件（這正好父）：

events: { 
    'event-name': function(property) { 
     console.log("Property from child component" + property); 
    } 
} 

總體而言，你的代碼應該是這個樣子：

Vue.component('employees', { 
    template: '#employees', 
    props:['list'], 
    created() { 
     this.list = JSON.parse(this.list); 
     this.$dispatch('send-list', this.list); 
    } 
}); 

new Vue({ 
    el: 'body', 
    data: { 
     rootlist: {} 
    }, 
    events: { 
     'send-list': function(property) { 
      this.rootlist = property; 
      console.log("Property from child component" + property); 
     } 
    } 
}); 

這將使所有的您的根Vue實例中可用的[list]數據。如果您想將其發送到所有組件，您可以在send-list功能內創建一個廣播事件this.$broadcast('send-list-down', this.list);。 $broadcast與$dispatch完全相同，但它將數據發送到Vue樹而不是up。只要確保您在組件中創建事件偵聽器併爲send-list-down事件創建事件偵聽器。