使用vue实现点击按钮滑出面板

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

index.vue文件中：

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

传递中介

<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">
<p class="docs-body">
</p>
</slidePanel>
export default {
props: {
show: false
},
methods: {
hide() {
 this.$emit('onHide')
 },
}

在组件slidePanel.vue中

<template>
 <transition name="slide-panel-fade">
 <p v-if="show" class="slide-panel" :style="{ width: width + 'px'}">
 <p class="slide-panel-layout">
 <p 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>
 </p>
 <p class="slide-panel-body">
 <slot></slot>
 </p>
 </p>
 </p>
 </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>

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