时间戳

首页 > 解决方案 > Vuejs注册组件并获取您是否正确注册了组件？错误

javascript - Vuejs注册组件并获取您是否正确注册了组件？错误

问题描述

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

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

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

//安装

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

// main.js 的全局寄存器 import VueCountdownTimer from 'vuejs-countdown-timer';

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 {
            //
        }
    }
}

标签： javascriptvue.jsvuejs2

解决方案

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

应用程序.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
    },
}

推荐阅读