Question

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

App.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
    }
  },

Answer 2

尝试将标签更改为payloadLength = ntohl(payloadLength); short bit = payloadLength & 1U; // get first bit payloadLength &= ~1UL; // set first bit to 0。要么

<PulseLoader>

我的理解是Vue会将camelCase转换为kebab-case，但不会将PascalCase转换为kebab-case。

看起来您还需要jQuery（components: { pulseLoader: PulseLoader }）

为什么我的组件无法导入App.vue中？

2 个答案: