Vuejs模態組件傳遞數據

我被困在VueJS中爲我的應用程序製作模態組件。我希望能夠將其置於自己的組件中以實現可重用性，能夠傳遞自定義內容並擁有多種模式。Vuejs模態組件傳遞數據

我所做的分量和它看起來像這樣從VueJS文檔：

Modal.vue

<template> 
    <div ref="modal"> 
    <script type="text/x-template" id="modal"> 
     <transition name="modal"> 
     <div class="modal-mask"> 
      <div class="modal-wrapper"> 
      <div class="modal-container"> 

       <div class="modal-header"> 
       <slot name="header"> 
        Header 
       </slot> 
       </div> 

       <div class="modal-body"> 
       <slot name="body"> 
        Body 
       </slot> 
       </div> 

       <div class="modal-footer"> 
       <slot name="footer"> 
        Footer 
       </slot> 
       <button class="btn btn-primary" @click="$emit('close')"> 
        Button 
       </button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </transition> 
    </script> 
    </div> 
</template> 


<script> 

    export default { 
    components: { }, 
    props: ['header', 'footer', 'body', 'button'], 
    data:() => ({ 
     showModal: false 
    }), 
    methods: { 
     open() { 
     console.log('Opening modal') 
     this.showModal = true 
     } 
    } 
    } 
</script> 

<style> 

    #modal { 
    /*color: #000;*/ 
    } 

    .modal-mask { 
    position: fixed; 
    z-index: 9998; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, .5); 
    display: table; 
    transition: opacity .3s ease; 
    } 

    .modal-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    } 

    .modal-container { 
    width: 300px; 
    margin: 0px auto; 
    /*padding: 20px 30px;*/ 
    background-color: #25262D; 
    color: #FEFEFE; 
    border-radius: 3px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
    transition: all .3s ease; 
    font-size: 1.2em; 
    } 

    .modal-header { 
    border-radius: 3px; 
    background-color: #202128; 
    border: none; 
    } 

    .modal-header h3 { 
    margin-top: 0; 
    color: #42b983; 
    } 

    .modal-body { 
    margin: 20px 0; 
    /*background-color: #202128;*/ 
    border: none; 
    } 

    .modal-footer { 
    text-align: center; 
    border: none; 
    } 

    .modal-footer .btn { 
    font-size: 1.0em; 
    } 

    /* 
    * The following styles are auto-applied to elements with 
    * transition="modal" when their visibility is toggled 
    * by Vue.js. 
    * 
    * You can easily play with the modal transition by editing 
    * these styles. 
    */ 

    .modal-enter { 
    opacity: 0; 
    } 

    .modal-leave-active { 
    opacity: 0; 
    } 

    .modal-enter .modal-container, 
    .modal-leave-active .modal-container { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    } 

</style>

我添加一個模式在我App.vue：

<button @click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal"> 
      Launch Updated Modal 
     </button> 

     <modal ref="updatedModal" v-if="showModal" @close="showModal = false"> 
     <!-- 
      you can use custom content here to overwrite 
      default content 
     --> 
     <div slot="header">custom header</div> 
     </modal> 

<script> 

import Modal from './components/Modal' 

export default { 
    components: { Modal }, 
    data:() => ({ 
     showModal: false 
    }), 
    methods: { 
     openUpdatedModal() { 
      this.$refs.updatedModal.open() 
     } 
    } 
} 
</script>

當我點擊按鈕我在控制檯中打開文本「打開模式」，但沒有任何反應。

我可以召喚它，它的工作原理，如果我有App.vue

所有的代碼我缺少什麼？

來源

2017-06-20 John

爲什麼你的模板中有'

相關問題