vue2 dialog内的组件再次打开dialog不执行mounted

在 Vue2 中，如果一个组件已经被 mounted（已经渲染到 DOM 节点上），再次打开 dialog 时是不会触发 mounted 钩子函数的。这是因为组件只会在第一次被渲染到 DOM 节点上时才会触发 mounted 钩子函数。

如果你需要在每次打开 dialog 时都执行一些代码，可以考虑使用 activated 钩子函数。activated 钩子函数会在组件每次被激活时都会被调用，包括第一次被渲染到 DOM 节点上时。

你可以在组件中添加 activated 钩子函数，并在其中执行你想要的逻辑。例如：

export default {
  activated() {
    // 执行你想要的逻辑
  },
  // 其他代码
}

相关问题

在vue3中每次打开子组件dialog都是新数据

在 Vue 3 中，如果你想要每次打开子组件（dialog）时显示新的数据，通常会通过 props 或者 vuex 状态管理来实现。以下是两种常见的做法：

1. **通过 Props**:
当父组件需要传递新数据给子组件时，可以在父组件的数据里维护一个变量，然后在需要展示新数据的时候更新这个变量，并将它作为 prop 传给子组件。例如：

   // 父组件
   data() {
     return {
       dialogData: initialData, // 初始化的数据
     }
   },
   methods: {
     showDialog() {
       this.dialogData = newData; // 更新数据
       this.$refs.dialog.show(); // 显示子组件
     }
   }

   // 子组件
   props: ['data'],
   mounted() {
     this.data = this.data; // 在子组件中接收并使用 prop 数据
   }

2. **通过 Vuex** (如果项目使用了状态管理库):
如果数据涉及到整个应用的状态，可以存储在 Vuex store 中。在打开子组件前从 store 中获取最新的数据，然后再传给子组件。

   // Vuex Store
   state() {
     return {
       dialogData: initialData,
     };
   },
   
   mutations: {
     updateDialogData(newData) {
       this.dialogData = newData;
     }
   },
   
   // 在父组件中
   methods: {
     showDialog() {
       this.$store.commit('updateDialogData', newData);
       this.$refs.dialog.show();
     }
   }

   // 子组件
   computed: {
     dialogData() {
       return this.$store.state.dialogData;
     }
   }

无论哪种方法，关键点在于确保子组件在接收到新数据后能够更新自身视图。

el-dialog mounted

当 `<el-dialog>` 被挂载到页面上时，可以执行一些操作。你可以在 `mounted` 钩子函数中处理这些操作。例如，你可以在这个钩子函数中执行一些初始化的代码或者调用一些方法。

下面是一个示例，展示了如何在 `mounted` 钩子函数中执行一些操作：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @close="closeDialog">
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    closeDialog() {
      // 关闭对话框时的逻辑
    }
  },
  mounted() {
    // 对话框挂载完成后执行的操作
    // 可以在这里进行一些初始化的逻辑或者调用方法
  }
}
</script>

在上面的示例中，`mounted` 钩子函数可以用来执行对话框挂载后的一些操作。你可以根据自己的需求，在这个钩子函数中添加适合的代码。