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>

 

效果图:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM