van-dialog 組件調用 報錯

如果需要在彈窗內嵌入組件或其他自定義內容，可以使用組件調用的方式

<van-dialog
  v-model="show"
  title="標題"
  show-cancel-button
>
  <img src="https://img.yzcdn.cn/vant/apple-3.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
  }
}