vue是单向数据流,父组件通过props传值给子组件,如果在子组件中修改会报错,一般是不在子组件中修改props的,但偶尔有需要在子组件有修改props,这里介绍三种可以修改子组件props的方法。
父组件用sync修饰,子组件通过$emit(‘update:参数’,值)函数去修改。在项目中通常可以用改方法关闭弹框。
父组件:
<create-edit-process-dialog
ref="createEditProcessDialogParent"
:roleList="roleList"
:processVisible.sync="processVisible"
v-if="processVisible"
></create-edit-process-dialog>
data(){
return{
processVisible: false
}
}
methods:{
editProcess(item) {
this.processVisible = true;
this.$nextTick(() => {
this.$refs.createEditProcessDialogParent.actionType = "edit";
// edit api
this.$refs.createEditProcessDialogParent.roleList = [
{ id: 2, name: "BBBB", parent_id: 3 },
{ id: 1, name: "AAAA", parent_id: 2 },
{ id: 4, name: "DDDD", parent_id: 5 },
{ id: 3, name: "CCCC", parent_id: 4 },
{ id: 5, name: "EEEE", parent_id: 6 },
{ id: 6, name: "FFFFF", parent_id: null }
];
});
},
}
子组件:
<el-dialog
:title="actionType === 'create' ? 'Create process' : 'Edit process'"
:visible="processVisible"
width="800px"
:before-close="handleClose"
custom-class="common-dialog create-edit-process-dialog"
:close-on-click-modal="false"
>
xxxx
<el-dialog>
mounted(){
setTimeout(() => {
console.log(" 子组件 mounted", this.roleList);
this.pushNullParentIdToArr();
this.recursionArr(this.roleList);
}, 0);
}
methods:{
handleClose() {
this.$refs["processForm"].resetFields();
this.$emit("update:processVisible", false);
},
}