Vue中递归组件与动态组件如何正确应用？

本文共计935个文字，预计阅读时间需要4分钟。

递归组件的模板内容如下：

递归组件

递归组件

Recursion: count={{ count + 1 }}

一递归组件

递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。

// 递归组件 recursive.vue <template> <div> <p>递归组件</p> <Recursion :count="count + 1" v-if="count < 3"></Recursion> </div> </template> <script> export default { name: "Recursion",//必须设置name属性 props: { count: { type: Number, default: 1 } } } </script>

这个例子中父页面使用该递归组件会调用三次recursive组件，值得注意的是递归组件必须设置递归次数限制数量

否则会抛出错误，该例子中通过count来限制递归次数。

二 动态组件

如果将一个Vue组件命名为Component会报错，因为Vue提供来特殊的元素<component>来动态挂载不同组件。

并使用is特性来选择要挂载的组件。