VueJS unknow自定义元素VueStripeCheckout

Question

这个问题已经在许多地方得到解答。但是它们都不适合我。 我在项目中安装了Vue stripe checkout组件。

npm install vue-stripe-checkout --save

然后进入mainJS

import VueStripeCheckout from 'vue-stripe-checkout';

Vue.use(VueStripeCheckout, 'publishable-key-here');

然后在我的组件内部

<vue-stripe-checkout
      ref="checkoutRef"
      :image="image"
      :name="name"
      :description="description"
      :currency="currency"
      :amount="amount"
      :allow-remember-me="false"
      @done="done"
      @opened="opened"
      @closed="closed"
      @canceled="canceled"
    ></vue-stripe-checkout>

我不知道为什么会发生这种情况？这是该库或我的代码中的错误吗？

Answer 1

由于该组件似乎尚未全局注册，因此您可以自己进行

// in global.js

import VueStripeCheckout from 'vue-stripe-checkout'
Vue.use(VueStripeCheckout, 'publishable-key-here')

// global registration
Vue.component('vue-stripe-checkout',VueStripeCheckout)

或者，您可以在组件级别导入它

// in somecomponent.vue

import VueStripeCheckout from 'vue-stripe-checkout'

export default {
  components: {
   'vue-stripe-checkout': VueStripeCheckout

   // or just - then you'll have to use it like <VueStripeCheckout>
   // VueStripeCheckout
  }
  ,props:[...]
  ,mounted()

在任何情况下-检出doc for components-registration

---

编辑：看过Vue.use调用的vue-stripe-checkout install fn的来源-您是否尝试过简单地使用camelCase而不是snake-case：

<VueStripeCheckout
  ref="checkoutRef"
  :image="image"