van-dialog组件调用报错怎么解决

今天小编给大家分享一下van-dialog组件调用报错怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

van-dialog组件调用报错

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式

<van-dialog  v-model="show"  title="标题"  show-cancel-button>  <img src="https://file.lsjlt.com/upload/202306/28/rkyfbi1vn5n.jpg"></van-dialog>

export default {  data() {    return {      show: false    };  }}

按照逛网 这样写，  结果 报错。不能正常使用。。。。这么费事？

原因：自己不细心导致！

首先：使用组件调用，那 一定要引用组件。

引用方式很重要，不是  ··import { Dialog } from 'vant';

而是： 

通过组件调用 Dialog 时，可以通过下面的方式进行注册

import { Dialog } from 'vant';// 全局注册Vue.use(Dialog);// 局部注册export default {  components: {    [Dialog.Component.name]: Dialog.Component  }}

van弹窗组件van-dialog遇到的坑

// HTML部分     <van-dialog                 v-model="dialogshow"                 confirm-button-text=“继续采集"                cancel-button-text=“取消采集"                title=“该户数据已采集，是否继续？"                show-cancel-buttoon                @confirm=“dialogConfirm"               @cancel="dialogCancel"      >          <div v-for="(item,index) in list" :key="index">                  <div>{{item}}</div>          </div>     </van-dialog>

// JS部分     data(){         return{                 dialogshow:false,                 list:[]         }    }      dialogconfirm(){      // 该步骤就是遇到的坑，不做这一步处理点击关闭弹窗后页面就会卡住无法拖动，后面发现是这个组件的这个节点没有清除         导致页面卡顿，真的太坑了van的有些组件。。。                             document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')                this.dialogshow=false      },      dialogcancel(){               this.dialogshow=false               this.$router.push({name:home})     }

以上就是“van-dialog组件调用报错怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。