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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhanglong_web/article/details/78692289

  首先是一个比较简单也是很经典的一个例子:
  子组件是一个弹窗,父组件点击显示,子组件弹出显示,子组件自己点击关闭那么弹窗消失,我们都知道,父子组件可以通过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是爸爸要去做饭
  希望这个通俗的解释能够帮助到很多新手,老司机可以一笑而过~

展开阅读全文

没有更多推荐了,返回首页