vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法

背景：因弹出层多个页面的详情都是一样的，因此把弹出层定义成组件，多次调用

        定义组件的过程中出现很多问题，因此再次记录最终成功的写法        

一、 简单实现页面调用弹出层组件的打开弹出层方法：

1. 弹出层组件 (index.vue)文件定义：

<template>
	<el-dialog title="详情" :visible.sync="dialogTableVisible" >...el-dialog> 
template>
 
<script>
	import { getDetailById} from "@/api/xxx/aaa";  //引入aaa.js中定义的getDetailById方法
	export default {
		name: "MyDialogComponent",
		data() {
			return {
				 dialogTableVisible: false   //弹出层是否打开
			};
		},
		methods: {
			open(id) { //打开弹出层方法被父组件 的 this.$refs.MyDialogComponent.open(row.id);方法调用
			  this.dialogTableVisible = true;//打开弹出层
			  
			  getDetailById(id).then(response => {  //调用引入方法查询详情记录
				this.form = response.data;
			  });
			},
		}
	}
script>

2. 在某个页面中引入弹出层组件并使用：

<template>
    
	<MyDialogComponent ref="MyDialogComponent">MyDialogComponent> 
template>
 
<script>
	import MyDialogComponent from '@/components/pcReleaseDialog/index'   //引入详情弹出层组件，组件路径src/components/pcReleaseDialog/index.vue
 
	export default {
	  components: { MyDialogComponent },  //注册弹出层组件
	  data() {
		return {
			...
		};
	  },
	  methods: {
		openDetail(row) {  //点击列表标题显示详情弹出层
			this.$refs.MyDialogComponent.open(row.id); // 触发子组件的打开弹出层方法 ---必须手动触发，子组件定义弹出层打开的方法不能写在create方法里面，否则父组件刷新就会弹出
			//需要使用$refs.调用子组件的方法，那么在上面使用子组件标签时就必须定义  ref="MyDialogComponent"，否则无法调用子组件的方法，如果只是组件间通信可以不需要定义 ref
		}
	  }
	}
script>

总结： 弹出层正常定义，父组件中把该弹出层定义成组件进行调用，

        调用步骤：

                1. 引入堂出差组件:  import xxx from  xxxx

                2. 注册堂出差组件:  components: { xxx}, 

                3. 调用打开弹出层的方法：this.$refs.xxx.open(row.id);

                4. 弹出层组件的使用（使用这个标签）需要添加ref属性，否则第3步无法成功

二、子父组件间通信 （如上的弹出层就是子组件，引入并使用了弹出层组件的就是父组件）

       1.  子组件（弹出层）定义props,并在props中定义子父通信的属性，如下代码中的pid

        2. 父组件 只要定义有跟子组件中props定义的属性相同即可

        （如下代码，子组件在props中定义了pid，那么父组件只需要在data下的return中定义有这个属性，之后这个属性有任何值子组件都能同步到）

<script>
    export default {
        props: {   //定义了一个pid ，这个pid能接收到 父组件中通信的pid这个属性的值
            pid : {
              type: String,
              default: ''
            }
        },
        data() {
            ...
        },
        method{...}
    },