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' 隐式地具有“ any”类型。

这可能是问题吗？

Answer 1

注册Vue组件时，您需要包括一个名称，在下面列出：

'*'

所以在您的情况下：

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

替代

您应该在resources-> js-> components文件夹中创建一个名为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() } } })的文件。在此处放置所有模板代码（“ #app” div应该显示的内容）。

该文件中应包含：

ExampleComponent.vue

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

<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>

这对您的情况有所帮助-让我知道：）

Answer 2

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

<Simplert></Simplert>

还有一些

<simplert></simplert>

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

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

2 个答案: