httpVueLoader.js props传递参数

以“组件详情弹窗”为例，做一下案例演示

建立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>

 

效果图：

 

posted @ 2020-08-10 09:59  最好的年纪  阅读(2562)  评论(0)  编辑  收藏  举报