在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> 上。