临西网站建设公司行者seo

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

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

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

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{...}},