Vuejs：动态递归组件

Posted 2023-02-23

【中文标题】Vuejs：动态递归组件

【英文标题】：Vuejs: Dynamic Recursive components

【发布时间】：2018-07-23 18:07:33

【问题描述】：

我正在尝试制作一个可以调用自身的自定义组件。我不断收到错误

Unknown custom element: <TestRec> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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

知道它可能是什么吗？

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

【参考方案1】：

当我删除 components 键并用它的名字调用它时为我工作。这是a running example in code sandbox，这是供将来参考的代码：

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

【讨论】：

让我免于数周的头痛。谢谢