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>这样就可以实现不同组件之间的册拉弹出。 以上所述是小编给大家介绍的使用vue实现点击按钮滑出面板的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对wanshiok.com网站的支持！
vue,点击按钮滑出面板
|
