在 Laravel 中使用 Vue 插件时出错：未知的自定义元素：<simplert>

Question

我正在尝试在我的 Laravel 5.7 应用程序中使用 Simplert Vue plugin，但出现以下错误：

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

我的代码基于这个问题的答案Vue.js 2- sweet alert package simplert not working

app.js 文件：

require('./bootstrap');
window.Vue = require('vue');

import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)

const app = new Vue({
  el: '#app',
  data: {
    obj: {
      title: 'Alert Title',
      message: 'Alert Message',
      type: 'info',
      useConfirmBtn: true,
      customConfirmBtnText: 'OK'
    }
  },
  methods: {
    openSimplert () {
      this.$Simplert.open(this.obj)
    },
    closeSimplert () {
      this.$Simplert.close()
    }
  }
})

home.blade.php 模板：

@section('content')
  // ..
  <simplert></simplert>
  // ..

package.json:

"dependencies": {
    "vue2-simplert-plugin": "^0.5.3"
}

在 VSCode 中，在我的 app.js 文件中的以下行 import Simplert from 'vue2-simplert-plugin' 上有一个提示：

找不到模块“vue2-simplert-plugin”的声明文件。 'x/node_modules/vue2-simplert-plugin/dist/vue2-simplert-plugin.js' 隐式具有“任何”类型。

这可能是问题吗？

Answer 1

我不知道为什么，但我遇到了同样的问题，一旦插件在 App.vue 中注册，一些组件可以正常工作：

<Simplert></Simplert> 

还有一些带有

<simplert></simplert>

唯一的区别是大写/小写，但有些组件接受大写，而其他不接受，我必须使用小写。

Answer 2

注册 Vue 组件时，需要包含名称，如下所示：

export default {
        name: 'example-name',
        data() {
            return {
            }
        },

所以在你的情况下：

const app = new Vue({
  el: '#app',
  name: 'example-name'
  data: {
    obj: {
      title: 'Alert Title',
      message: 'Alert Message',
      type: 'info',
      useConfirmBtn: true,
      customConfirmBtnText: 'OK'
    }
  },
  methods: {
    openSimplert () {
      this.$Simplert.open(this.obj)
    },
    closeSimplert () {
      this.$Simplert.close()
    }
  }
})

交替

你应该在你的 resources->js->components 文件夹中创建一个名为 ExampleComponent.vue 的文件。在此处放置所有模板代码（'#app' div 应显示的内容）。

您应该包含该文件：

<template>
    //code here...
</tempate>

<script>
    export default {
        name: 'example-component-name',
        data() {
            return {
                obj: {
                    title: 'Alert Title',
                    message: 'Alert Message',
                    type: 'info',
                    useConfirmBtn: true,
                    customConfirmBtnText: 'OK'
                }
            }
        },
        methods: {
            //methods here
        } 
    }
</script>

然后在您的 app.js 文件中，您需要做的就是：

require('./bootstrap');

import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)

Vue.component('example-component-name',require('./components/ExampleComponent.vue').default);

这应该对您的情况有所帮助 - 让我知道 :)