vue 父子之间的通讯

Posted 2021-01-04 web-zqk

//父组件
<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>