Question

我试图将vue组件加载到组件中，但出于实际原因不使用Webpack。我使用http-vue-loader来加载vue文件。

到目前为止，我设法通过以下方式创建vue文件并将其加载到HTML中：

main.js

new Vue({
  el: '#app-shop',
  components: {
    'comp-products': httpVueLoader('components/comp-products.vue'),
    'comp-shop': httpVueLoader('components/comp-shop.vue')
  },
});

comp.shop.vue

<script>
    module.exports =  {
        props:{
            quantity: {
            type: Number
            }
        }
    }
</script>

comp.products.vue

<template>
    <div id="products">
        <div class="productsItemContainer" v-for="product in products">
            <div class="productsItem">
                <div class="">
                    <div class="mkcenter" style="position:relative">
                        <a class="item">
                            <img class="productImg" width="120px" height="120px" v-bind:src="'assets/products/' + product.image">
                            <div class="floating ui red label" v-if="product.new">NEW</div>
                        </a>
                    </div>
                </div>
                <div class="productItemName" >
                    <a>{{ product.name }}</a>
                </div>
                <div class="mkdivider mkcenter"></div>
                <div class="productItemPrice" >
                    <a>€ {{ product.unit_price }}</a>
                </div>
                <div v-on:click="addToCart" class="mkcenter">
                    <div class="ui vertical animated basic button" tabindex="0">
                        <div class="hidden content">Koop</div>
                        <div class="visible content">
                            <i class="shop icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports =  {
        name: 'Products',

        data() {
            return {
                products: [],
                addToCart: function(){
                    // quantity++;
                    console.log("test")
                    console.log(quantity)                    
                }
            }

        }            
  },

        mounted() {
            axios
            .get("json/products.json")
            .then(response => {
            this.products = response.data.products;
            });
        }
    }
</script>

<style>
    #products{display:flex;flex-wrap:wrap;padding:20px}
    .productsItemContainer{padding:5px;margin:auto;text-align: center}
    .productsItem{width: 200px;padding:20px 0px 10px 0px;;border:1px solid #ddd}
    .productsItem:hover{border:1px solid #ddd;-webkit-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);-moz-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.13);}
    .item{width: 50%;margin: 0px}
    .productImg{transition: all .5s ease-in-out;}
    .productImg:hover{transform: scale(1.1);}
    .productItemName{text-align: center}
    .productItemName a{font: Roboto; color:#333745;font-size: 17px}
    .productItemPrice{text-align: center; padding: 5px 0 10px 0; }
    .productItemPrice a{color:red; font-size: 16px;font: Roboto; color:black; font-weight: 700}
</style>

以上方法有效，但是我正在寻找一种从comp.shop.vue内部调用comp.products.vue的方法。

Answer 1

从comp.shop.vue导入comp.products.vue作为组件：

<script>
    module.exports =  {
        props:{
            quantity: {
            type: Number
            }
        },
        components: {
            'comp-products': httpVueLoader('components/comp-products.vue')
        }
    }
</script>

有没有一种方法可以使用http-vue-loader在组件内加载组件

1 个答案: