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

Question

我想使用 VueJS 在 Framework7 中创建侧面板作为可重用组件。这是我的代码..

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')
    },
]

在后来的 vue 中我导入为，

import Card from './Card.vue'

我尝试访问另一个视图，例如，

现在我收到类似

的错误

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

谁能帮我看看我哪里弄错了？

谢谢，

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> 元素。 render 函数将根据您在 <template> 元素中放置的任何内容生成。

Answer 3

确保您要重用的组件包含在 template 标签内如下

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

然后在parent里面注册像这样

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

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

How to create a reusable component in VueJs?

html-framework-7

vue-router

vue-component

vuejs2