在使用Vue第三方组件的时候,需要进行注册,但是在官方文档中只字未提,真让人火冒三丈。

Vant官方文档中给的使用教程,是这样的,但是我们实际使用的时候,不仅需要引用组件,还需要在components中注册组件,下面有案例

<template>
  <div class="hello">
    <!-- 输入任意文本 -->
    <van-field v-model="text" label="文本" />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号" />
    <!-- 允许输入正整数，调起纯数字键盘 -->
    <van-field v-model="digit" type="digit" label="整数" />
    <!-- 允许输入数字，调起带符号的纯数字键盘 -->
    <van-field v-model="number" type="number" label="数字" />
    <!-- 输入密码 -->
    <van-field v-model="password" type="password" label="密码" />
    <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
  </div>
</template>

<script>
import { Field,Cell } from "vant";
import { Calendar } from "vant";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      tel: "",
      text: "",
      digit: "",
      number: "",
      password: "",
      date: "",
      show: false
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  },
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [Calendar.name]: Calendar,//你用的时候还得按照这样的格式再次注册,不然报错

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>