如何在 el-dialog 中刷新子组件内容 - 两种方法详解

<p>本文介绍了两种在 el-dialog 中刷新子组件内容的方法，包括监听 el-dialog 的 visible 属性变化和使用 <code>$emit</code> 触发事件。附带示例代码，帮助你快速解决子组件刷新问题。</p>
<h3>方法一：监听 el-dialog 的 visible 属性变化</h3>
<p>在子组件中，可以通过 <code>$parent</code> 或 <code>$root</code> 访问到 el-dialog 组件，然后在 el-dialog 的 visible 属性变化时，调用子组件中的刷新方法即可。</p>
<pre><code class="language-vue"><template>
  <el-dialog v-model="dialogVisible" @visible-change="handleVisibleChange">
    <child-component ref="childComponent"></child-component>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleVisibleChange(visible) {
      if (visible) {
        this.$nextTick(() => {
          this.$refs.childComponent.refresh()
        })
      }
    }
  }
}
</script></code></pre>
<h3>方法二：使用 $emit 方法触发事件</h3>
<p>在子组件中使用 <code>$emit</code> 方法触发事件，然后在父组件中监听该事件，触发父组件的刷新方法。在 el-dialog 中，可以通过在子组件中挂载一个 <code>$parent</code> 属性来访问父组件。</p>
<pre><code class="language-vue"><!-- 父组件 -->
<template>
  <el-dialog v-model="dialogVisible">
    <child-component @refresh="handleRefresh"></child-component>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleRefresh() {
      this.$nextTick(() => {
        // 刷新操作
      })
    }
  }
}
</script>
<!-- 子组件 -->
<template>
  <el-button @click="handleClick">刷新</el-button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('refresh')
    }
  }
}
</script></code></pre>