vue—子組件修改父組件的值


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

第一步:首先得保證父組件中有值吧
這是userManage.vue 
1 data(){
2     return{
3         dialogCreate:'false'
4     }
5 }
第二步:在父組件中引用子組件
1 import Form from './userCreate'
第三步:父組件中注冊子組件並引用
<template>
    <app-form></app-form>
</template>

<script>
    export default{
        name:'user',
        components:{
            "app-form":Form
        },
        data(){
            return{
                dialogCreate:'false'
            }
        }
    }
</script>
第四步:把父組件的值綁定給子組件上 
1 <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;
     }
}

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM