ElementUI中:visible.sync的使用

在ElementUI中，.sync是一个修饰符，它允许你在子组件中更改一个 prop 的值，并且这个变化也会反映在父组件中。这是通过v-model实现的，但v-model只能用于双向绑定数据，而.sync可以用于任何类型的 prop。

如果你有一个父组件，它需要根据子组件的状态来更新数据，你可以使用:visible.sync来实现这一点。

以下是一个简单的例子，演示如何使用visible.sync：

父组件：

<template>
  <div>
    <modal-component :visible.sync="dialogVisible"></modal-component>
    <button @click="dialogVisible = true">打开对话框</button>
  </div>
</template>
 
<script>
import ModalComponent from './ModalComponent.vue';
 
export default {
  components: {
    ModalComponent
  },
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

子组件（ModalComponent）：

<template>
  <el-dialog :visible="visible" @update:visible="handleDialogVisible">
    <!-- 对话框内容 -->
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    handleDialogVisible(newVisibleValue) {
      this.$emit('update:visible', newVisibleValue);
    }
  }
};
</script>

在这个例子中，当你点击按钮时，父组件的dialogVisible属性被设置为true，这会通过:visible.sync传递给子组件，子组件内部的el-dialog会根据这个属性显示或隐藏。当对话框关闭时，子组件会触发一个update:visible事件，并将新的可见性值传递给父组件，父组件在接收到这个值后更新自己的dialogVisible属性。