Question

在我们的一个项目中，我尝试使用 vuejs-countdown-timer 组件，但出现此错误

<块引用>

未知的自定义元素：-您是否注册了组件正确吗？对于递归组件，请确保提供“名称” 选项。

在这个包文档中，我们有：

<块引用>

//安装

npm i vuejs-countdown-timer -S 导入组件

// main.js 中的全局寄存器 import VueCountdownTimer from 'vuejs-倒计时';

Vue.use(VueCountdownTimer);

及其基本用法：

<template>
    <vue-countdown-timer
      @start_callback="startCallBack('event started')"
      @end_callback="endCallBack('event ended')"
      :start-time="'2018-10-10 00:00:00'"
      :end-time="1481450115"
      :interval="1000"
      :start-label="'Until start:'"
      :end-label="'Until end:'"
      label-position="begin"
      :end-text="'Event ended!'"
      :day-txt="'days'"
      :hour-txt="'hours'"
      :minutes-txt="'minutes'"
      :seconds-txt="'seconds'">
    </vue-countdown-timer>
</template>

<script >
export default {
  name: 'Timer',
  methods: {
    startCallBack: function(x) {
      console.log(x);
    },
    endCallBack: function(x) {
      console.log(x);
    },
  },
};
</script>

现在在安装我导入到我的 app.js 中的包后：

import Vue from 'vue'

import VueCountdownTimer from 'vuejs-countdown-timer';


Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default

import Timer from './components/partials/timer.vue'


new Vue({
    store,
    components: {
        Timer,
        //
    }, computed: {}, mount: {}
}).$mount('#app')

之后我尝试将 html 模板用作：

<login inline-template>
    <div class="page-content">
        <div class="content-wrapper">
            ...
        </div>

        <Timer></Timer>

    </div>
</login>

我的 login.js 内容：

import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";

export default {
    data() {
        return {
            //
        }
    }
}

Answer 1

在 app.js 中全局注册 vue-countdown-timer，在 login.js 中本地注册自定义组件定时器

app.js


import Vue from 'vue'

import VueCountdownTimer from 'vuejs-countdown-timer';


Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default

new Vue({
    store,
    computed: {}, mount: {}
}).$mount('#app')

登录.js

import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
import Timer from '../partials/timer.vue'


export default {
    data() {
        return {
            //
        }
    },
    components: {
      Timer
    },
}

Vuejs 注册组件，你是否正确注册了组件？错误

1 个答案: