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

Question

我想在Framework7中用VueJS创建Side作为一个可重用组件。这是我的密码。

​

​

Card.vue

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

现在我注册如下所示，

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

在后来我进口的吸血鬼中，

import Card from './Card.vue'

我试着进入另一部录影带，

现在我收到了一个错误

Vue警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

谁能帮我一下我哪里弄错了？

谢谢,

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://v2.vuejs.org/v2/guide/components.html#Local-Registration

Answer 2

你是在给我们看Card.vue的全貌吗？对于有效的单文件vue组件，我希望看到<template>、<script>和<style>元素。呈现函数将由您在<template>元素中放置的任何内容生成。

Answer 3

确保要重用的组件包装在template标记中，如下所示

<template>
    <div>
        <component data/>
    <div/>
<template/>

然后将其注册到父级中，如下所示

export default {
  name: "Card",
  components: {
    Card
  },
};