vue—子组件如何修改父组件的值

如何在子组件中修改父组件的值

第一步：首先得保证父组件中有值吧

这是userManage.vue

data（）{
    return{
        dialogCreate:'false'
    }
}

第二步：在父组件中引用子组件

import Form from './userCreate'

第三步：父组件中注册子组件并引用

<template>
    <app-form></app-form>
</template>

<script>
    export default{
        name:'user',
        components:{
            "app-form":Form
        },
        data（）{
            return{
                dialogCreate:'false'
            }
        }
    }
</script>

第四步：把父组件的值绑定给子组件上

<app-form v-bind:dialogCreate = "dialogCreate" ></app-form>

第五步：既然父组件把值给了子组件了，子组件得接受和用吧

子组件

1.先接受
export default{
    props:['dialogCreate']
}
2.就可以直接在自组建中用了
<p>{{dialogCreate}}</p>

第六步：向父组件发射一个方法 

比如我们在后台数据接收成功时，告诉父组件已经成功

this.$emit('success',false);

第七步：父组件接收到这个方法并且执行改变父组件的值

<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>

methods: {
     check(){
         alert(1);
     },
     success(res){
        this.dialogCreate = res;
     }
}