关于Vue父子组件之间的通信

首先是一个比较简单也是很经典的一个例子:
子组件是一个弹窗，父组件点击显示，子组件弹出显示，子组件自己点击关闭那么弹窗消失，我们都知道，父子组件可以通过props传递数据，因为是单向数据流，也就是说，父组件的数组可以通过props传递给子组件，但是这个过程是不可逆的（暂时先这么以为），下面是代码。

// 父组件
<template>
    <div class="parent">
        <button @click="showPanel">显示弹窗</button>
        <v-popup v-show="panelShow" :panelShow="panelShow"></v-popup>
    </div>
</template>

export default {
    data() {
        return {
            panelShow: false
        }
    },
    methods: {
        showPanel() {
          this.panelShow = true;
        }
    },
    components: {
      'v-popup': Popup
    }
}
----------
// 子组件
<div class="popup">
    <button @click="hidePanel">关闭弹窗</button>
</div>

export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
        // 第一感觉是直接在这里撸代码，修改父组件传过来的panelShow，当然可以通过赋值给新变量的方式去修改，但是修改也并不能将值传递给父组件，是无效的
        }
    }
}

真正的解决办法是在子组件触发自定义事件，父组件监听这个自定义事件，这个流程像是孩子喊了一句我饿了，那么爸爸就开始做饭，这个孩子喊的动作就是子组件的this.emit(),爸爸做饭的动作就是父组件的this.on()，当然我们不能忽略了一点，喊是this.emit()，听是this.on()，那么听的内容是什么也很关键，因为父组件听到不同的声音会做不同的事，那么这个声音就是自定义事件的name！直接上代码

// 父组件增加了@hideMe="hideChild"
<template>
    <div class="parent">
        <button @click="showPanel">显示弹窗</button>
        <v-popup v-show="panelShow" :panelShow="panelShow" @hideMe="hideChild"></v-popup>
    </div>
</template>

export default {
    data() {
        return {
            panelShow: false
        }
    },
    methods: {
        showPanel() {
          this.panelShow = true;
        },
        hideChild(){
          this.panelShow = false;  
        }
    },
    components: {
      'v-popup': Popup
    }
}

----------
// 子组件的方法里增加了this.emit('hideMe')
<div class="popup">
    <button @click="hidePanel">关闭弹窗</button>
</div>

export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
            this.emit('hideMe')
        }
    }
}

可以看到如上较新的代码里父组件里的@hideMe就是子组件要emit的事件（this.emit(‘hideMe’)），也是父组件要监听的事件（其实就是v-on:hideMe），父组件里的hideChild就是在监听到这个emit之后要做的动作，也就是hideMe是孩子饿了，hidePanel是爸爸要去做饭
希望这个通俗的解释能够帮助到很多新手，老司机可以一笑而过~

关于Vue父子组件之间的通信

猜你喜欢