vue页面传参调用公共组件

一写一个公共组件

1在src目录的components文件夹下创建vue文件
2在data同级新增props属性和定义入参

export default {
  name: 'PdfIndex',`在这里插入代码片`
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      objectUrl: ''
    }
  },

二页面引入公共组件

1 在script导入公共组件
2 在components中注册组件
3 页面直接调用

    <a-modal v-model="visible" title="报表预览" @ok="handleOk" width="800">
      <div><pdfindex :pdfUrl="previewUrl" /></div>
    </a-modal>

import pdfindex from '@/components/PdfIndex.vue';

export default {
  name: 'xxxx',
  components: { pdfindex },
 }