如何從另一個組件VUE

Question

調用方法我有一個組件

<template> 
    <div class="section"> 
     <a v-if='type == "events"' class="button is-primary" @click="showForm()"> 
      <i class="fa fa-calendar"></i> &nbsp<span class="card-stats-key"> Add Event</span> 
     </a> 
     <a v-if='type == "places"' class="button is-primary" @click="showForm()"> 
      <i class="fa fa-location-arrow"></i> &nbsp<span class="card-stats-key"> Add Place</span> 
     </a> 
     <table class="table" v-if="!add"> 
      <thead> 
       <tr> 
        <th> 
         <abbr title="Position"># Client Number</abbr> 
        </th> 
        <th>Title</th> 
        <th> 
         <abbr title="Played">Status</abbr> 
        </th> 
        <th> 
         <abbr title="Played">View</abbr> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr v-for="event in events"> 
        <th>{{event.client_number}}</th> 
        <td v-if='type == "events" '>{{event.title}}</td> 
        <td v-if='type == "places" '>{{event.name}}</td> 
        <td> 
         <p class="is-danger">Waiting</p> 
        </td> 
        <td><a href="#"> View </a></td> 
       </tr> 
      </tbody> 
     </table> 
     <add v-if="add" v-on:hideAdd="hideFrom()"></add> 
    </div> 
</template> 
<script> 
import Add from '../forms/AddPlace.vue' 
export default { 
    name: 'Tabbox', 
    data() { 
     return { 
      events: [], 
      add: '' 
     } 
    }, 

    props: ['type'], 
    created() { 
     let jwt = localStorage.getItem('id_token') 
     var ref = wilddog.sync().ref('users').child(jwt).child(this.type); 
     ref.once("value") 
      .then((snapshot) => { 
       this.events = snapshot.val(); 
      }).catch((err) => { 
       console.error(err); 
      }) 
    }, 
    methods: { 
     showForm(add) { 
      if (this.add == true) 
       this.add = false; 
      else { 
       this.add = true; 
      } 
     }, 
     hideFrom() { 
      this.add = false 
      console.log('This add is false'); 
     } 
    }, 
    components: { 
     Add 
    } 
} 
</script> 

與其他成分

<template> 



<div class="field is-horizontal"> 
    <div class="field-label"> 
    <!-- Left empty for spacing --> 
    </div> 
    <div class="field-body"> 
    <div class="field"> 
     <div class="control"> 
     <button class="button is-primary" v-bind:class="{ 'is-loading': loading } " @click="addPlace()"> 
      Add place 
     </button> 
     </div> 
    </div> 
    </div> 
</div> 


</template> 



<script> 
    export default { 
     data() { 
      return { 

     add: false 
      } 
     }, 
    methods: { 
     addPlace() { 
     this.$emit('hideAdd', this.add) 
     }, 

    }, 
    } 
</script> 

我怎樣才能調用第二個從showForm（）從第一第一組件的方法！我試圖與$ emit函數，它不起作用。並嘗試與$廣播，一樣。我如何在那裏使用活動？

Answer 1

父組件模板添加ref屬性的子組件是這樣的：

<add v-if="add" v-on:hideAdd="hideFrom()" ref="add-component"></add> 

現在你的父組件將有機會到子組件的VueComponent實例和方法，你可以像這樣訪問：

methods: { 
    showForm() { 
    this.$refs['add-component'].addPlace(); 
    } 
} 

Here's documentation on refs.