子组件修改props

477 阅读1分钟

由于vue单向数据流,子组件不能直接修改props里的属性值,可通过以下方法修改

一、通过.sync修饰符

// 父组件
<child :dialogShow.sync="dialogVisible"></child>

data() {
    return {
        dialogVisible: false
    };
}
// 子组件
<el-dialog :visible.sync="dialogVisible"></el-dialog>
props: {
    dialogVisible: {
        type: Boolean,
        default: false
    }
}

methods: {
    changeDialogVisible() {
        this.$emit('update:dialogShow', true);
    }
}