vue.js - 如何在 vue 路由中使用组件?
问题描述
我正在尝试<channel-card></channel-card>
在我的家庭路线中使用 vue 组件,但遇到了许多错误。
main.js
const router = new VueRouter({
routes: [
{path: '/home', component: home}
],
mode: 'history'
});
home.vue 路由
<template>
<div class="home">
<main class=" bg-white w-full h-100vh shadow-md p-2">
<channel-card></channel-card>
</main>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
错误
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <channel-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Home> at src/components/home.vue
<App> at src/App.vue
<Root>
ChannelCard.vue
export default {
name: 'ChannelCard',
props: {
msg: String
}
}
编辑
我也尝试将它添加到我的 home.vue 路由中:
import ChannelCard from './partials/ChannelCard.vue';
export default {
name: 'home',
components: { ChannelCard },
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
我收到此错误:
./partials/ChannelCard.vue 在 ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/b abel-loader/lib!./node_modules/cache-loader/dist /cjs.js??ref--0-0!./node_modules/vue-loader/lib??vu e-loader-options!./src/components/home.vue?vue&type=script&lang=js&
解决方案
您需要注册<channel-card>
组件并将其添加到components
脚本部分home.vue
:
家.vue
<template>
<div class="home">
<main class=" bg-white w-full h-100vh shadow-md p-2">
<channel-card></channel-card>
</main>
</div>
</template>
<script>
import channelCard from './channel-card.vue';
export default {
name: 'home',
components: { channelCard },
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
推荐阅读
- javascript - 设置 ag 网格独立图表最小 x 轴值不起作用
- javascript - WordPress InnerBlocks Gutenberg 不正确保存
- opencv - 使用带有烧瓶的网络摄像头
- r - 如何计算两个变量(Var1=boys,Var2=girls)中一个变量(Variable=boys)在行中进行 10 次左右观察的比例
- python - 为熊猫数据框中的行和列设置“元名称”
- swift - 将 PassthroughSubject<[Int], Never> 映射到 AnyPublisher
- javascript - PayPal支付成功后显示HTML按钮
- python-3.x - 如何在python中的数组中创建多个范围?
- python - 使用 pandas 对一列中的文本数据进行分类,并在下一列中说明相应的类别
- c# - C#打开文本文件,如双击