#yyds干货盘点# 利用element和vue结合实现父子组件弹窗功能

首先我们看一下子组件内的弹窗代码，这是element里的一个弹框组件样式 ’append-to-body ‘是凌驾于其他页面之上的页面意思。

<template>
  <div class='aaa'>
    <el-dialog  :visible.sync="outerVisible">
    <el-dialog
      width="30%"

      :visible.sync="innerVisible"
      append-to-body>
    </el-dialog>
    <div slot="footer" class="dialog-footer">
      <el-button @click="outerVisible = false">取 消</el-button>
      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  }
</script>

当子组件的代码写好了，我们需要父组件来引入

<template>
  <el-button type="text" @click="open()">点击打开子组件页面</el-button>
  <aaa ref='aaa'></aaa>
</template>

<script>
import aaa from '../aaa.vue'
  export default {
    data() {
      return {
      };
    },
    components:{
    aaa,
    },
    methods:{
    open(){
    this.$refs.aaa.outerVisible = true
    }
    }
  }
</script>

然后当点击打开子组件页面的按钮时就可以打开弹窗页面了