Vue Props 的值是双向的还是单向的？

在 Vue 中，props 的值是单向的。这意味着：

1. 单向数据流：父组件通过 props 向子组件传递数据，子组件不能直接修改这些 props 的值。子组件只能读取 props 的值。

2. 数据更新：如果子组件需要更新父组件中的数据，通常的做法是通过发出事件（使用 emit）来通知父组件进行更新。父组件可以监听这些事件，并在事件触发时更新其状态。

示例

假设有一个父组件和一个子组件：

父组件

<template>
    ....
    ....
    <PatientFormDialog 
        v-model:modelValue="dialogVisible" 
        :dialogTitle="dialogTitle" 
        :closeDialog="closeDialog"
        :resetForm="resetForm" 
        :submitForm="submitForm" />
</template>

<script setup>

import { ref} from 'vue'

//test
import PatientFormDialog from './PatientFormDialog.vue';

const dialogVisible = ref(false); // 控制对话框的显示
const dialogTitle = ref("添加病患"); // 对话框标题

// 打开对话框
const openDialog = () => {
    console.log("打开对话框");
    dialogVisible.value = true; // 将对话框设置为可见
};

// 关闭对话框
const closeDialog = () => {
    dialogVisible.value = false; // 将对话框设置为不可见
};

// 重置表单
const resetForm = () => {
    // 这里可以添加重置逻辑
};

// 提交表单
const submitForm = () => {
    // 这里可以添加提交逻辑
    console.log("表单已提交");
};

</script>

<style lang='less' scoped>
.emo-form-inline {
    display: flex;
}

.pull-right {
    float: right;
}

.el-card {
    --el-card-padding: 15px;
}



.pagination-container {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    // margin-top: 20px;
}

:deep(.el-dialog) {
    text-align: left !important;
    width: 800px;
    height: 600px;
}
</style>

子组件

<template>
    <el-dialog :title="dialogTitle" v-model.sysn="modelValue" :close-on-click-modal="false" @close="handleCloseDialog"
        :width="620" class="custom-dialog">
        <el-form :model="formData" ref="formRef" label-width="120px">
            <el-form-item label="病例编号" prop="id">
                <el-input v-model="formData.id" placeholder="请输入病例编号" class="input-field"></el-input>
            </el-form-item>
            <el-form-item label="病人姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入病人姓名" class="input-field"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别" class="input-field">
                    <el-option label="男" value="male"></el-option>
                    <el-option label="女" value="female"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" class="input-field"></el-input>
            </el-form-item>
            <el-form-item label="住址" prop="address">
                <el-input v-model="formData.address" placeholder="请输入住址" class="input-field"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
                <div style="display: flex; justify-content: center; align-items: center;">
                    <el-button type="primary" @click="handleSubmit">确认</el-button>
                    <el-button @click="resetForm" style="margin-left: 10px;">重置</el-button>
                </div>
                <el-button type="danger" @click="handleCloseDialog" style="margin-left: 10px;">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 定义接收的 props
const props = defineProps({
    dialogTitle: {
        type: String,
        required: true,
    },
    closeDialog: {
        type: Function,
        required: true,
    },
    resetForm: {
        type: Function,
        required: true,
    },
    submitForm: {
        type: Function,
        required: true,
    }
});
const modelValue = ref(false);
// 定义发出的事件请求更新modelValue
const emit = defineEmits(['update:modelValue']);

const formData = ref({
    id: '',
    name: '',
    gender: '',
    phone: '',
    address: ''
});

// 提交表单
const handleSubmit = () => {
    console.log("提交的表单数据:", formData.value);
    props.submitForm(); // 调用外部传入的 submitForm 方法
    emit('update:modelValue', false); // 提交后关闭对话框
};

// 关闭对话框
const handleCloseDialog = () => {
    emit('update:modelValue', false); // 关闭时发出事件
    props.resetForm(); // 关闭时重置表单
};
</script>

<style scoped>
.custom-dialog .el-dialog {
    border-radius: 10px;
    /* 圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* 阴影 */
}

.custom-dialog .el-dialog__header {
    background-color: #f5f5f5;
    /* 头部背景色 */
    border-bottom: 1px solid #e4e4e4;
    /* 头部底部边框 */
}

.custom-dialog .el-dialog__title {
    font-weight: bold;
    /* 加粗标题 */
    color: #333;
    /* 标题颜色 */
}

.custom-dialog .el-dialog__body {
    padding: 20px;
    /* 内容内边距 */
}

.input-field {
    max-width: 400px;
    /* 设置最大宽度 */
    width: 100%;
    /* 使输入框宽度自适应 */
}
</style>

总结

• 单向数据流：props 是单向的，父组件的数据流向子组件。
• 事件发出：子组件通过发出事件来请求父组件更新数据。

这种设计模式有助于保持组件之间的清晰关系和可维护性。

// 定义接收的 props
const props = defineProps({
    modelValue: {
        type: Boolean,      //错了props只能单项传值 x
        required: true,
    },
    dialogTitle: {
        type: String,
        required: true,
    },
    closeDialog: {
        type: Function,
        required: true,
    },
    resetForm: {
        type: Function,
        required: true,
    },
    submitForm: {
        type: Function,
        required: true,
    }
});

问题描述

在 Vue 中，组件之间的数据传递通常是单向的。为了实现双向数据绑定，通常需要通过 props 和事件进行繁琐的传递。是否可以使用状态管理器来解决这个问题？

是的，使用状态管理器（如 Vuex 或 Pinia）可以有效地解决组件之间的数据双向传递问题，尤其是在复杂的应用中。

1. 状态管理器的优势

• 集中管理：状态管理器允许您在一个地方集中管理应用的状态，使得状态的变化更加可预测和可追踪。
• 跨组件共享：通过状态管理器，您可以轻松地在多个组件之间共享状态，而不需要通过 props 和事件进行繁琐的传递。
• 简化数据流：使用状态管理器可以减少组件之间的耦合，使得数据流更加清晰。