博客

描述：父子两个组件，父组件打开子组件弹窗，然后执行方法请求接口，获取数据之后渲染页面，且每次点击都执行该方法。

遇到的问题：

最开始简单地将方法放在子组件mounted里面，只有第一次打开弹窗会执行方法。

了解到，弹窗只创建了一次。所以，在想是不是可以用keep-alive模式下的actived，然而并没有什么用。actived和deactived只在keep-alive使用时生效。

然后想到在打开弹窗时候，强行调用子组件的方法

// initForm： 子组件方法
// this.dialog.data.id: 子组件的请求接口的参数
this.$refs.dialog.initForm(this.dialog.data.id)

这次算是ok了，但是仅仅这样还不够。多次请求接口发现，如果接口请求速度够快，方法会提前执行，渲染组件。

这本来不是什么坏事，坏就坏在渲染阶段。如果数据先一步到位，然后开始渲染组件，这时候弹窗还没有创建虚拟dom，会有bug。例如：我的弹窗如果是一个echart的图表，需要绑定一个dom节点进行渲染。节点都没有渲染出来，就会报错。

所以，第一次使用时候采用的方案：

直接在调用子组件方法的外面包了一个setTimeout，让弹窗飞一会，然后再渲染。

后面回过头看了一下，其实不用这么麻烦，element中弹窗组件有个回调函数

选择opened

<el-button @click="edit(id)">修改</el-button>
<el-button @click="add">新增</el-button>
<el-dialog
  :title="dialog.title"
  :visible.sync="dialog.visible"
  :width="dialog.width"
  center
  @opened="initForm"> <!-- element自带的弹窗打开回调函数 -->
  <component :is="dialog.name" ref="dialog"></component><!-- 动态组件:子组件 -->
</el-dialog>

<script>
import { Add, Edit } from './Dialog'
export default {
  components: {
    Add,
    Edit
  },
  data () {
    return {
      dialog: { // 弹窗组件传递数据
        title: '',
        visible: false,
        width: '',
        name: '' // 组件名
      }
    }
  },
  methods: {
    // 新增链接配置信息
    add () {
      this.dialog = {
        visible: true,
        title: '新增连接配置信息',
        width: '1000px',
        name: 'add-config'
      }
    },
    // 编辑修改设备信息
    edit (id) {
      this.dialog = {
        visible: true,
        title: '修改连接配置信息',
        width: '1000px',
        name: 'edit-config',
        data: id
      }
    },
    // 弹窗打开回调（更新数据）
    initForm () {
      switch (this.dialog.name) {
        case 'add':
          this.$refs.dialog.initForm()
          break
        case 'edit':
          this.$refs.dialog.initForm(this.dialog.data.id)
          break
        default:
          break
      }
    }
  }
}
</script>