javascript - 为什么我的组件没有导入到 App.vue 中？

Question

我试图在页面加载期间显示脉冲加载器。 我从下面的代码中收到两个错误。

应用程序.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to='/'><div v-if="$route.name=='home'" class='activeLink'>Home</div></router-link>
      <pulse-loader :loading=this.loading></pulse-loader>
    </div>
    <keep-alive include="home">  </keep-alive>
    <router-view />

  </div>
</template>

<script>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
export default {
  data() {
    return {
      loading: true
    }
    components: {
      PulseLoader
  }
  },
  methods: {
    getLoadingStatus() {
      $(window).on('load', function(){
        this.loading=false;
        });
    },
  },
  mounted() {
    this.getLoadingStatus()
  },
};
</script>

错误:

Unknown custom element: <pulse-loader> - did you register the component correctly

ReferenceError: $ is not defined

这是一个从 vue cli 创建的普通 vue.js 项目。

Answer 1

注册组件不是在数据中完成的，而是它自己完成的。

  data() {
    return {
      loading: true
    }
    components: {
      PulseLoader
     }
  },

应改为:

  components: {
      'pulse-loader': PulseLoader  // name the component here what you want to name your custom tag
  },
  data() {
    return {
      loading: true
    }
  },