vue3中el-dialog组件传值

在Vue 3中，el-dialog 组件是来自 Element UI 库的一个对话框组件。要传值给 el-dialog，可以通过其 title 和 body 属性传递静态文本，或者使用 v-bind 动态绑定props。

以下是一个简单的例子，展示如何在父组件中设置 el-dialog 的 title 和 body 属性：

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
    {{ dialogBody }}
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const dialogTitle = ref('我是标题');
    const dialogBody = ref('我是内容');
    const dialogVisible = ref(false);
 
    return {
      dialogTitle,
      dialogBody,
      dialogVisible
    };
  }
};
</script>

在这个例子中，dialogTitle 和 dialogBody 是响应式数据，可以在组件的 setup 函数中修改。dialogVisible 用于控制对话框的显示与隐藏。通过 .sync 修饰符，可以使得父组件可以通过修改 dialogVisible 的值来控制对话框的显示状态。

如果需要传递复杂数据或者组件，可以使用 props 来实现：

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
    <custom-component v-bind="componentProps"></custom-component>
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
import CustomComponent from './CustomComponent.vue';
 
export default {
  components: {
    CustomComponent
  },
  setup() {
    const dialogTitle = ref('我是标题');
    const dialogVisible = ref(false);
    const componentProps = ref({
      message: '这是传递给子组件的属性',
      // 其他需要传递给 CustomComponent 的属性
    });
 
    return {
      dialogTitle,
      dialogVisible,
      componentProps
    };
  }
};
</script>

在这个例子中，<custom-component> 是一个自定义组件，它接收 componentProps 中的属性。通过 v-bind="componentProps"，我们将所有 componentProps 的属性都绑定到了 <custom-component> 上。