vue异步加载数据 传递给 子组件，触发mounted方法，子组件修改父组件值

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 }
        ];
      });

      
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

子组件：

<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);
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27