本文主要是介绍vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景：因弹出层多个页面的详情都是一样的，因此把弹出层定义成组件，多次调用
定义组件的过程中出现很多问题，因此再次记录最终成功的写法
一、 简单实现页面调用弹出层组件的打开弹出层方法：
1. 弹出层组件 (index.vue)文件定义：
<template><el-dialog title="详情" :visible.sync="dialogTableVisible" >...</el-dialog> <!-- dialogTableVisible全局定义boolean值控制弹出或关闭-->
</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.vueexport 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{...}},这篇关于vue中把弹出层.vue文件注册成组件供其他.vue文件调用的写法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
