`无法读取未定义的属性（读取'组件'）`

Posted 2023-02-16

【中文标题】`无法读取未定义的属性（读取\'组件\'）`

【英文标题】：`Cannot read properties of undefined (reading 'component')``无法读取未定义的属性（读取'组件'）`

【发布时间】：2021-11-24 20:37:59

【问题描述】：

错误：Cannot read properties of undefined (reading 'component')

我正在使用 vue.js3 + laravel8

我正在尝试将我重复使用的 my-button 组件注册为全局组件

vue.js3 + lorevel8

我的 app.js

window.Vue = require('vue').default;
import  createApp  from 'vue';
import router from "./router";
import components from './components/UI'

components.forEach(component => 
    app.component(component.name, component)
)

const app = createApp()
app.use(router)
   .mount("#app")

我的 Index.js

import MyButton from "./MyButton";


export default  [
    MyButton
]

我的 button.vue

<template>
    <button class="btn">
        <slot></slot>
    </button>
</template>


<script>
export default 
    name: "my-button"

</script>

<style scoped lang="scss">

.btn 
    background-color: var(--color-primary-light);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family:'Josefin Sans', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 1.8rem 3rem;
    cursor: pointer;
    transition: all .2s;

&:hover 
     background-color: var( --color-primary-dark);
 


</style>

错误：无法读取未定义的属性（正在读取“组件”）

有人可以帮我吗？

无法弄清楚 undefined 的属性

【参考方案1】：

我跌跌撞撞

const app = createApp () 

应该在之前

components.forEach (component => 
    app.component (component.name, component)
)

【参考方案2】：

我也遇到过这个问题。但是我设法解决了这个问题，因此我正在分享我的答案。

使用 Vue3 比在你的 app.js 中进行必要的更改：

import 
  createApp
 from 'vue';
const app = createApp();

// You can register your components globally like this also
// Add as many components as you want.

app.component('Name of your component', require('Path to the component').default)

// In your case 
app.component('my-button',require('Path to the component').default);

app.mount('#app');

我认为它应该可以解决问题。 请检查。