Vuejs：动态递归组件 [英] Vuejs: Dynamic Recursive components

问题描述

我正在尝试创建一个自我调用的自定义组件。我一直收到错误

I am trying to make a custom component that call itself. i keep getting an error

未知的自定义元素：< TestRec> - 你是否正确注册了组件？对于递归组件，请务必提供名称选项。

我已经包含了一个名称选项，如下所示，但这不是解决问题。

I have included a name option as you can see below but this doesn't solve the problem.

知道它可能是什么吗？

<template>
  <div>
        <h4>I am a component that can call itself below</h4>

        <v-select :items="['TestRec', 'normal']" v-model="comp"></v-select>

        <hr />
        <component :is="comp"></component>
  </div>
</template>

<script>
import TestRec from "./TestRec";
export default {
    name: 'New-Test-Rec', //Name tried 'Test-Rec' too. Same result
    components: {
        TestRec
    },
    data(){
        return {
            comp: null
        }
    }
}
</script>

推荐答案

当我删除 components key并使用其名称调用它。这里是代码沙箱中的一个运行示例，以下是未来参考的代码：

Worked for me when I removed components key and called it with its name. here is a running example in code sandbox and here is the code for future reference:

<template>
    <div class="hello">
        <h4>I am a component that can call itself below</h4>
        <button @click="show = true">Load next</button>
    <hr />
    <component v-if="show" :is="'TestRec'"></component>
    </div>
</template>

<script>
    export default {
  name: 'TestRec',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      show: false
    }
  }
}

</script>

这篇关于Vuejs：动态递归组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！