vue.js - vue组件库的正确使用方法是什么?
问题描述
我正在尝试在 Laravel 项目中使用一些外部 vue 组件库,但我最初几次尝试使用 vue-avatar、vue 通知铃和 pwa-install 均未成功。
对于前两个,一切似乎都已检查,没有构建错误,组件实际上显示在 html 中,但没有头像或通知铃。没有迹象表明外部包导入到我的组件中。
这些是我采取的步骤:
- 根据需要 npm 安装 vue-avatar 和 notification-bell。
- 我为每个组件创建了一个组件,导入了已安装的每个包并进行了默认导出。
- 然后我照常在另一个文件中使用我的组件。
这些代码基本上是样板文件,没有什么可添加的,所以我不知道为什么我没有得到预期的输出。
任何帮助,将不胜感激。
这是我的头像组件代码:
<template>
<div></div>
</template>
<script>
import Avatar from 'vue-avatar'
export default {
components: {
Avatar
}
}
</script>
这是我使用它的布局文件的代码:
<template>
<div>
<div class="min-h-screen bg-gray-100">
<nav class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<breeze-application-logo class="block h-9 w-auto" />
</inertia-link>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<breeze-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</breeze-nav-link>
</div>
</div>
<div v-if="$page.props.flash.message" class="alert">
{{ $page.props.flash.message }}
</div>
<!-- <div>
<broadcast-message></broadcast-message>
</div> -->
<avatar :username="$page.props.auth.user.first_name"></avatar>
<notification-bell />
<div class="hidden sm:flex sm:items-center sm:ml-6">
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<breeze-dropdown align="right" width="48">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
{{ $page.props.auth.user.first_name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</template>
<template #content>
<breeze-dropdown-link :href="route('logout')" method="post" as="button">
Log Out
</breeze-dropdown-link>
</template>
</breeze-dropdown>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<breeze-responsive-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</breeze-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="flex items-center px-4">
<div class="font-medium text-base text-gray-800">{{ $page.props.auth.user.first_name }}</div>
</div>
<div class="mt-3 space-y-1">
<breeze-responsive-nav-link :href="route('logout')" method="post" as="button">
Log Out
</breeze-responsive-nav-link>
</div>
</div>
</div>
</nav>
<!-- Page Heading -->
<header class="bg-white shadow" v-if="$slots.header">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<slot name="header" />
</div>
</header>
<!-- Page Content -->
<main>
<slot />
</main>
</div>
</div>
</template>
<script>
import BreezeApplicationLogo from '@/Components/ApplicationLogo'
import BreezeDropdown from '@/Components/Dropdown'
import BreezeDropdownLink from '@/Components/DropdownLink'
import BreezeNavLink from '@/Components/NavLink'
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink'
//import BroadcastMessage from '@/Components/BroadcastMessage'
import Avatar from '@/Components/DashboardAvatar'
import NotificationBell from '@/Components/DashboardNotificationBell'
export default {
props: {
username: String,
},
components: {
BreezeApplicationLogo,
BreezeDropdown,
BreezeDropdownLink,
BreezeNavLink,
BreezeResponsiveNavLink,
//BroadcastMessage,
Avatar,
NotificationBell,
},
data() {
return {
showingNavigationDropdown: false,
}
},
}
</script>
根据您的输入,我尝试按照建议在组件中使用导入,但在控制台中出现“超出最大调用堆栈”错误。查看我的新代码:
<template>
<avatar :username="username"/>
</template>
<script>
import Avatar from 'vue-avatar'
export default {
props: {
username: String
},
name: 'DashboardAvatar',
components: {
Avatar
}
}
</script>
当我直接导入并使用它时,我得到一个类型错误'无法读取未定义的属性_c。
我更正了我的组件中的一个错误:<avatar :username="username" />
不是<dashboard-avatar>
,并且该错误现在与我上面提到的直接使用该组件的类型错误相同。
解决方案
我认为您可能误解了 Vue SFC 的工作原理。
您正在导入头像组件,但实际上并未使用它。
例如,正确的方法是:
<template>
<avatar v-bind="$attrs" v-on="$listeners"/>
</template>
<script>
import Avatar from 'vue-avatar'
export default {
name:'Avatar',
components: {
Avatar
}
}
</script>
这样你从 vue-avatar 导入组件,并在 Avatar SFC 中实际使用它,($attrs 和 $listeners 只是将所有属性和事件绑定到组件)。完成此操作后,您的导入应该可以工作。
或者您可以直接在父组件中导入它,而无需先创建子组件(因为您没有自定义 vue-avatar 功能,而只是使用开箱即用的功能):
<script>
import BreezeApplicationLogo from '@/Components/ApplicationLogo'
import BreezeDropdown from '@/Components/Dropdown'
import BreezeDropdownLink from '@/Components/DropdownLink'
import BreezeNavLink from '@/Components/NavLink'
import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink'
//import BroadcastMessage from '@/Components/BroadcastMessage'
import Avatar from 'vue-avatar' <----------------------Use the module here directly.
import NotificationBell from '@/Components/DashboardNotificationBell'
export default {
props: {
username: String,
},
components: {
BreezeApplicationLogo,
BreezeDropdown,
BreezeDropdownLink,
BreezeNavLink,
BreezeResponsiveNavLink,
//BroadcastMessage,
Avatar,
NotificationBell,
},
...