javascript - 如何将动态变量传递给 'component' 然后显示它 - VueJS

Question

我无法在我的组件中显示变量(这是图像的链接)，我迷路了......

(为了帮助您，我在表格中单击打开 pdf 的图标)

谢谢你!

Vue.component('modal', {
    template: '#modal-template-pdf',
    props: {
        lien: String
    }
});

let appCompta = new Vue({
        data: {
            showModalActive: false,
            currentModalPdfLink: '',
        }
}).$mount('#'+id+' #app-compta')
    
    
    

<img slot="apercu" slot-scope="props" class="iconeged main" src="images/ico_pdf.png"
             v-bind:currentModalPdfLink='props.row.imglien'
             @click="showModalActive = true"
        >

<modal v-if="showModalActive" @close="showModalActive = false" v-bind:lien="currentModalPdfLink">
        <h3 slot="header">Aperçu PDF</h3>
    </modal>

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

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

                        <div class="modal-body">
                            <slot name="body">
                                {{currentModalPdfLink}}
                                <iframe height='100%' width='100%' frameborder='0' :src="currentModalPdfLink"/>
                            </slot>
                        </div>

                        <div class="modal-footer">
                            <slot name="footer">
                                <button class="modal-default-button" @click="$emit('close')">
                                    FERMER
                                </button>
                            </slot>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>

Answer 1

我假设 currentModalPdfLink 是您的 pdf 链接？ 您传递的 prop 的名称是 src，因此您需要在组件中使用相同的名称引用它:

Vue.component('modal', {
    template: '#modal-template-pdf',
    props: ['src']
});