Question

我正在尝试使用vue-stripe-checkout插件。我在main.js文件中声明了import和Vue.use（）： import VueStripeCheckout from "vue-stripe-checkout"; Vue.use(VueStripeCheckout, 'pk_test_MYTESTPK');

然后我只是想按照插件文档中的建议在代码中使用它：<vue-stripe-checkout [...]></vue-stripe-checkout>

但是我有一个错误说： Unknown custom element: <vue-stripe-checkout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

几个小时后，我不知道为什么这不起作用。

有人有主意吗？

这是我main.js文件中的一个花絮：

import Vue from 'vue'
import Vuetify from 'vuetify'
[...MY IMPORTS...]
import VueStripeCheckout from "vue-stripe-checkout";


// global components
import GlobalComponents from './globalComponents'

// app.vue
import App from './App'


[... OTHER IMPORTS AND ROUTER OPERATIONS...]

Vue.use(InstantSearch);
[... MY Vue.use() ...]
Vue.use(VueStripeCheckout, 'pk_test_MYTESTPK');


new Vue({
    store,
    i18n,
    router,
    render: h => h(App),
    components: { App }
}).$mount('#app')

以及如何在* .vue组件中使用它（这只是git提供的示例）：

<template>
  <div>
    <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>
    <button @click="checkout">Checkout</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: 'https://i.imgur.com/HhqxVCW.jpg',
      name: 'Shut up and take my money!',
      description: 'Cats are the best dog!',
      currency: 'PHP',
      amount: 99999
    }
  },
  methods: {
    async checkout () {
      // token - is the token object
      // args - is an object containing the billing and shipping address if enabled
      const { token, args } = await this.$refs.checkoutRef.open();
    },
    done ({token, args}) {
      // token - is the token object
      // args - is an object containing the billing and shipping address if enabled
      // do stuff...
    },
    opened () {
      // do stuff 
    },
    closed () {
      // do stuff 
    },
    canceled () {
      // do stuff 
    }
  }
}
</script>```



Thanks !

Answer 1

如果要在组件中使用标签vue-stripe-checkout，则必须首先将其导入。您可以全局导入一个组件，也可以导入另一个组件内。

这样做应该将Stripe组件导入到容器组件中：

<script>
import VueStripeCheckout from "vue-stripe-checkout";
  ...
export default {
  ...
  components: {
     'vue-stripe-checkout': VueStripeCheckout,
  },
  ...
}
</script>

如果您需要有关组件注册的更多信息：https://vuejs.org/v2/guide/components-registration.html

Vuejs和Stripe Checkout：错误消息“您是否正确注册了组件？”

1 个答案: