Vue：在组件内添加组件引用后未知的自定义元素答案

【问题标题】：Vue: Unknown custom element after adding component reference within componentVue：在组件内添加组件引用后未知的自定义元素
【发布时间】：2019-08-14 03:06:32
【问题描述】：

我是 Vue 新手，正在测试 vue-draggable 组件。添加对 vue-draggable 组件的引用后，我收到错误消息“未知自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。”

我在这里缺少什么？之前的类似线程没有在组件中引用组件。

import draggable from "./vue-draggable";

Vue.component('fxm-form', {
    name: 'fxm-form',

    props: [
        "formMode"
    ],

    components: {
        draggable
    },

    data() {
        return {
            list: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF']
            }
    },


    mounted() {
    },

    methods:
    {
    },

    template: `

    <div>
      <h1>Dragable Test</h1>

      <draggable :list="list" class="drag-container">
        <div v-for="item in list" class="drag-item">{{ item }}</div>
      </draggable>

    </div>
`
});

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

当您使用Vue.component() 创建组件时，它会全局注册组件。

根据官方docs：

必须在创建根 Vue 实例之前进行全局注册（使用新 Vue）

这是因为你没有在 Vue Instance 之前初始化你的组件。

你可以在你的内部注册你的组件Vue Instance。

这是codesandbox 的工作示例

【讨论】：