Vue.js顯示的呼叫從另一個組件

Question

一個組件我有兩個組件：

Vue.component('repo-button', { 
    props:["check_in_id", "repo_id"], 
    template: '#repo-button', 
    methods: { 
    fetchRepo: function() { 
     url = window.location.href.split("#")[0] + "/check_ins/" + this.check_in_id + "/repositionings/" + this.repo_id + ".json" 
     cl(url) 
     cl(this) 
     var that; 
     that = this; 

     $.ajax({ 
      url: url, 
      success: function(data) { 
       cl(data) 
       that.showRepo(); 
      } 
     }) 

    }, 
    showRepo: function() { 
     // what do I put here to display the modal 
    } 
    }, 
    data: function() { 
    var that = this; 
    return { 

    } 
} 
}); 

Vue.component('repo-modal', { 
    template: "#repo-modal", 
    data: function() { 
     return { 
      status: 'none' 
     } 
    } 
}); 

var repositionings = new Vue({ 
    el: "#repo-vue" 
}); 

...和我的觀點是由一個按鈕和一個模式的。我想按鈕來調用repo-button組件fetchRepo和顯示模式（其從nonestatus屬性更改爲block。

<script type="text/x-template" id="repo-button"> 
    <div class='socialCircle-item success'> 
    <i class='fa fa-comment' 
     @click="fetchRepo" 
     :data-check_in='check_in_id' 
     :data-repo='repo_id'> 
    </i> 
    </div> 
</script> 

<script type="text/x-template" id="repo-modal"> 
    <div v-bind:style="{ display: status }" class="modal" id="vue-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-client_id="<%= @client.id %>"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title"></h4> 
       </div> 
       <div class="modal-body"></div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</script> 

<div id="repo-vue"> 
    <div is="repo-modal"></div> 
    <div is="repo-button" repo_id="<%= ci.repositioning.id %>" check_in_id="<%= ci.id %>"></div> 
</div> 

Answer 1

Props down, events up

在Vue.js，親子組件關係可以概括爲 作爲道具向下的事件向上，父母通過 道具將數據傳遞給孩子，並且孩子通過事件向父母發送消息

特別是，如果組件的狀態需要從外部（由父代或同級）控制，那麼該狀態應該作爲父項傳遞進來。事件向父母表明，國家應該改變。

您的模態狀態由事件本身和兄弟組件控制。所以國家生活在父母身上，並作爲道具傳遞給模態。單擊模式關閉按鈕將發出（自定義）hidemodal事件;單擊同級組件的評論圖標將發出一個showmodal事件。父母通過相應地設置showRepoModal數據項來處理這些事件。

Vue.component('repo-button', { 
 
    template: '#repo-button', 
 
    methods: { 
 
    showRepo: function() { 
 
     this.$emit('showmodal'); 
 
    } 
 
    } 
 
}); 
 

 
Vue.component('repo-modal', { 
 
    template: "#repo-modal", 
 
    props: ["show"], 
 
    computed: { 
 
    status() { 
 
     return this.show ? 'block' : 'none' 
 
    } 
 
    }, 
 
    methods: { 
 
    hideRepo() { 
 
     this.$emit('hidemodal'); 
 
    } 
 
    } 
 
}); 
 

 
var repositionings = new Vue({ 
 
    el: "#repo-vue", 
 
    data: { 
 
    showRepoModal: false 
 
    } 
 
});

.socialCircle-item i { 
 
    cursor: pointer; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<template id="repo-button"> 
 
    <div class='socialCircle-item success'> 
 
    <i class='fa fa-comment' 
 
     @click="showRepo" 
 
     > 
 
    </i> 
 
    </div> 
 
</template> 
 

 
<template id="repo-modal"> 
 
    <div v-bind:style="{ display: status }" class="modal" id="vue-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <h4 class="modal-title"></h4> 
 
       </div> 
 
       <div class="modal-body"></div> 
 
       <div class="modal-footer"> 
 
        <button type="button" @click="hideRepo" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<div id="repo-vue"> 
 
    <div is="repo-modal" :show="showRepoModal" @hidemodal="showRepoModal = false"></div> 
 
    <div is="repo-button" @showmodal="showRepoModal = true"></div> 
 
</div>