记录vue封装组件以及父组件和子组件互相传值问题

1. 封装dialog弹窗

在components目录下新建 *.vue文件(自行添加业务目录)

<template>
  <div>
    <el-dialog
      :modal="true"
      :modal-append-to-body="true"
      :title="tittle"
      :visible.sync="pointDetailsOpen"
      :width="width"
      :height="height"
      :close-on-click-modal="false"
      :show-close="true"
      :close-on-press-escape="true"
      center>
      <div>
        2222
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendMsgToParent()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      pointDetailsOpen: {
        type: Boolean,
        default: true
      },
    },
    mounted() {
    },
    data() {
      return {
        tittle: '设备详情',
        width: "60%",
        height: "2000px",
      }
    },
    methods: {
      sendMsgToParent() {
        this.$emit("listenToChildEvent","this message is from child");
      }
    }
  }
</script>
<style scoped>

</style>

2. 父组件引用子组件

<point-details v-if="pointDetailsOpen" :isShow="pointDetailsOpen" @listenToChildEvent="childMethod"></point-details>

import pointDetails from '@/components/PointDetails/index.vue'
components:{
	pointDetails
},
data(){
	return {
		pointDetailsOpen: false,
	}
},
methods: {
	 /** 接收子组件传值 */
      childMethod(data) {
		// data即子组件传的值
        this.pointDetailsOpen = false
      },
}