//父組件
<template>
     <Button @click=‘openChild‘><Button>  
     <child-modal :modalStatus="Status" @parentClick=‘click‘></child-modal>  //其次，父的自定義事件parenClick被觸發
</template>
<script>
     import chilModal from ‘./chilModal.vue‘
     export default{
          components:{
               chilModal    //註冊組件
          },
          data(){
               return{
                    Status:false,
               }
          }
          methods:{
               click(childData){     //而click是parentClick的方法，最終被觸發
                    console.log(‘得到子傳過來的數據’,childData)
                    this.modalStatus = false;
               }

               openChild(){
                    //status通過props將true傳給子的modalStatus
                    this.Status = true
               }

          }
     }
</script>

//子組件

<template>
    <Modal v-model="modalStatus">
        <div slot="footer">

            <Input type="text" v-model="obj.nameIpt"/>
            <Input type="text" v-model="obj.ageIpt"/>
            <Input type="text" v-model="obj.weightIpt"/>

<Button type="success" @click="ok">確認</Button>
        </div>
    </Modal>
</template>
<script>
    export default {

        data(){
            return{
                obj:{
                    nameIpt:‘‘,
                    ageIpt:‘‘,
                    weightIpt:‘‘,
                }
            }
        },

        props:{
            modalStatus:{
                type:Boolean,
                default:false
            },
        },
        methods: {
            ok () {
                //首先，子組件觸發parentClick(它是父的自定義事件),並攜帶了數據obj
                this.$emit(‘parentClick‘,this.obj)
            },
        }
    }
</script>

vue 父子之間的通訊