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

【问题标题】：How to create a reusable component in VueJs?如何在 VueJs 中创建可重用的组件？
【发布时间】：2017-12-06 23:33:14
【问题描述】：

我想使用 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')
    },
]

在后来的 vues 中我导入为，

import Card from './Card.vue'

我尝试在另一个 vue 中访问，例如，

现在我遇到了类似的错误

[Vue 警告]：未知的自定义元素：- 你是否注册了组件正确吗？对于递归组件，请确保提供 “名称”选项。

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

谢谢，

【问题讨论】：

标签： vuejs2 vue-component vue-router html-framework-7

【解决方案1】：

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

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

然后在父节点内部注册像这样

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

【讨论】：

【解决方案2】：

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

【讨论】：

添加
components 是一个对象，在其中你有 'name':object, 'name':object。试试components = {'FSidebar':FSidebar,'CSidebar':CSidebar}

【解决方案3】：

从您的代码中并不清楚您在做什么，但是当您尝试将一个组件用作另一个组件的子组件而不在父组件的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

【讨论】：

再次说明... 未能安装组件：未定义模板或渲染功能。（在中找到...我什至添加了组件：{Card, Card};