用vue实现点击按钮，滑出面板（二）完结版

在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击事件。

index.vue文件中：

<div>

      <el-button type="primary" @click="onShow">点我</el-button>

</div>

传递中介

<addForm :show="formShow" @onHide="formShow = false"></addForm>

引入组件，即是要弹出的组件

import addForm from './docsForm'

export default {

components: {

addForm

},

data() {

return {

show: false,

formShow: false

}

},

watch: {

 show: {

            handler: function(newVal, oldVal) {

                this.show = newVal

            },

            deep: true

        }

},

methods: {

onShow() {

            this.formShow = true

        }

}

}

该文件里面的方法就是这样。

然后就是弹出组件docsForm.vue怎样向上传数据

<slidePanel :width="550" :show="show" title="添加知识"  @changeShow="hide">

<div class="docs-body">

</div>

</slidePanel>

export default {

props: {

show: false

},

methods: {

hide() {

            this.$emit('onHide')

        },

}

在组件slidePanel.vue中

<template>

    <transition name="slide-panel-fade">

        <div v-if="show" class="slide-panel" :style="{ width: width + 'px'}">

            <div class="slide-panel-layout">

                <div class="slide-panel-header">

                    <h3 class="slide-panel-header-title">{{title}}</h3>

                    <button class="slide-panel-header-close" @click="onShow"><i class="el-icon-close"></i></button>

                </div>

                <div class="slide-panel-body">

                    <slot></slot>

                </div>

            </div>

        </div>

    </transition>

</template>

<script>

export default {

    props: {

        title: String,

        show: Boolean,

        width: {

            type: Number,

            default: 500

        }

    },

    methods: {

        onShow() {

            this.$emit('changeShow', false)

        }

    },

    watch: {

        show: {

            handler: function(newVal, oldVal) {

                this.show = newVal

            },

            deep: true

        }

    },

    mounted() {

        document.body.appendChild(this.$el)

    },

    destroyed() {

        this.$el.remove()

    }

}

</script>

这样就可以实现不同组件之间的册拉弹出。