今天小编给大家分享一下van-dialog组件调用报错怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式
计算
安全
数据库
网络和加速
企业服务
<van-dialog
v-model="show"
title="标题"
show-cancel-button
>
<img src="https://cache.yisu.com/upload/information/20220526/112/1330.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
}
}// 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组件调用报错怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
