以“组件详情弹窗”为例，做一下案例演示
建立ComponentDetails.vue组件
<template>
<!-- Modal是使用的iview模态窗组件，与传递参数无关 -->
<Modal v-model="modalStatus" draggable scrollable>
<div slot="header" style="font-weight:bold;">
<!-- 展示props传递过来的值 -->
<span>{{mode}}---{{search}}</span>
</div>
<div slot="footer"></div>
</Modal>
</template>
<script>
// 注意：httpVueLoader.js使用props传递参数时，需要参数名称全部小写（大小写混合情况，只能通过this.$attrs获取到属性值，但是不能建立props）
module.exports = {
props: {
mode: String,
search: Boolean,
},
data: function () {
return {
modalStatus: true,
};
},
created: function () {},
mounted: function () {},
methods: {},
};
</script>
父页面引用ComponentDetails.vue组件
<script> // 注意引用组件名称全小写，路径中的组件大小写可以随意 new Vue({ el: '#app', components: { 'component-details': httpVueLoader('/Content/VueComponents/ComponentDetails.vue') }, data: { } } </script>
<body> <!--组件详情弹窗,model为静态参数，search为动态参数--> <component-details mode="byBaseId" v-bind:search="true"></component-details> </body>
效果图：
