如何在VueJs中创建可重用的组件？

Question

我想使用VueJS将Side Panel创建为Framework7中的可重用组件。这是我的代码..

Card.vue

Warning messages:
1: The label(s) venn not found 
2: The label(s) venn not found

现在我注册为如下组件，

<f7-card>
  <f7-card-header>Card header content</f7-card-header>
  <f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
  <f7-card-footer>Card footer content</f7-card-footer>
</f7-card>

在后来的vues中导入为，

import Vue from 'vue'
export default [
    {
        path: '/card/',
        component: require('./Card')
    },
]

我尝试访问其他类似的，如，

现在我收到了像

这样的错误

  

[Vue警告]：未知的自定义元素： - 你注册了吗？   组件正确吗？对于递归组件，请务必提供   ＆＃34;名称＆＃34;选项。

任何人都可以帮助我在哪里弄错了？

谢谢，

Answer 1

从您的代码中确切地知道您正在做什么并不是很清楚，但是当您尝试将组件用作另一个组件的子组件而未在父组件的components设置中注册时，您会遇到错误：

<script>
import Card from './Card.vue'

export default {
  data () {
    return {
       somedata: 'some value'
    }
  },
  components: {Card: Card}, // <- you're missing this
  // etc...

}
</script>

您还可以在全球范围内注册组件。更多信息：https://vuejs.org/v2/guide/components.html#Local-Registration

Answer 2

你是否向我们展示了Card.vue的全部内容？对于有效的单文件vue组件，我希望看到<template>，<script>和<style>元素。渲染函数将根据您放在<template>元素中的任何内容生成。