vue3 emit update:dialogVisible

在Vue 3中，`emit` 方法用于从子组件触发自定义事件。这些自定义事件可以被父组件监听，并且可以传递数据给父组件。`update:dialogVisible` 是一个特殊的命名模式，通常用于子组件向父组件同步某个状态的变化，例如模态框的显示状态。

这里是如何使用它的一个简单示例：

在子组件中，你可能会有一个方法来切换模态框的显示状态，并触发一个`update:dialogVisible`事件来通知父组件状态的变化：

// 子组件中的方法
methods: {
  toggleDialog() {
    this.dialogVisible = !this.dialogVisible;
    // 触发update:dialogVisible事件，并传递当前的dialogVisible状态
    this.$emit('update:dialogVisible', this.dialogVisible);
  }
}

父组件可能会有一个方法来响应这个事件，并据此更新父组件中的状态：

// 父组件中的模板部分
<ChildComponent @update:dialogVisible="handleDialogVisible" />

// 父组件中的方法
methods: {
  handleDialogVisible(newValue) {
    // 更新父组件中的dialogVisible状态
    this.dialogVisible = newValue;
  }
}

在这个例子中，每当子组件调用`this.$emit('update:dialogVisible', this.dialogVisible);`时，都会触发父组件中的`handleDialogVisible`方法，并将新的状态值作为参数传递过去。

这种模式在Vue中常用于子组件和父组件之间的状态同步，特别是在表单控件或者模态框等场景中非常有用。