趣味测试小程序_使用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 
 /div 
 /slidePanel 
export default {
pro凡科抠图: {
show: false
methods: {
hide() {
 this.$emit('onHide')
}

在组件slidePanel.vue中

 template 
 transition name="slide-panel-fade" 
 div v-if="show" :style="{ width: width + 'px'}" 
 div 
 div 
 h3 {{title}} /h3 
 button @click="onShow" i /i /button 
 /div 
 div 
 slot /slot 
 /div 
 /div 
 /div 
 /transition 
 /template 
 script 
export default {
 pro凡科抠图: {
 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 

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

以上所述是小编给大家介绍的使用vue实现点击按钮滑出面板的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！