以“組件詳情彈窗”為例，做一下案例演示
建立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>
效果圖：
