有没有办法使用 http-vue-loader 加载组件内的组件

Question

我正在尝试在组件中加载 vue 组件，但出于实际原因不使用 webpack。\n我使用http-vue-loader加载 vue 文件。

\n\n

到目前为止，我成功创建了 vue 文件并通过以下方式将它们加载到我的 HTML 中：

\n\n

main.js

\n\n

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

\n\n

comp.shop.vue

\n\n

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

\n\n

comp.products.vue

\n\n

<template>\n    <div id="products">\n        <div class="productsItemContainer" v-for="product in products">\n            <div class="productsItem">\n                <div class="">\n                    <div class="mkcenter" style="position:relative">\n                        <a class="item">\n                            <img class="productImg" width="120px" height="120px" v-bind:src="\'assets/products/\' + product.image">\n                            <div class="floating ui red label" v-if="product.new">NEW</div>\n                        </a>\n                    </div>\n                </div>\n                <div class="productItemName" >\n                    <a>{{ product.name }}</a>\n                </div>\n                <div class="mkdivider mkcenter"></div>\n                <div class="productItemPrice" >\n                    <a>\xe2\x82\xac {{ product.unit_price }}</a>\n                </div>\n                <div v-on:click="addToCart" class="mkcenter">\n                    <div class="ui vertical animated basic button" tabindex="0">\n                        <div class="hidden content">Koop</div>\n                        <div class="visible content">\n                            <i class="shop icon"></i>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    module.exports =  {\n        name: \'Products\',\n\n        data() {\n            return {\n                products: [],\n                addToCart: function(){\n                    // quantity++;\n                    console.log("test")\n                    console.log(quantity)                    \n                }\n            }\n\n        }            \n  },\n\n        mounted() {\n            axios\n            .get("json/products.json")\n            .then(response => {\n            this.products = response.data.products;\n            });\n        }\n    }\n</script>\n\n<style>\n    #products{display:flex;flex-wrap:wrap;padding:20px}\n    .productsItemContainer{padding:5px;margin:auto;text-align: center}\n    .productsItem{width: 200px;padding:20px 0px 10px 0px;;border:1px solid #ddd}\n    .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);}\n    .item{width: 50%;margin: 0px}\n    .productImg{transition: all .5s ease-in-out;}\n    .productImg:hover{transform: scale(1.1);}\n    .productItemName{text-align: center}\n    .productItemName a{font: Roboto; color:#333745;font-size: 17px}\n    .productItemPrice{text-align: center; padding: 5px 0 10px 0; }\n    .productItemPrice a{color:red; font-size: 16px;font: Roboto; color:black; font-weight: 700}\n</style>\n

\n\n

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

\n

Answer 1

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

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