vue 循环 递归组件_Vue.js组件应用与嵌套数据递归组件案例

本篇文章主要讲的是嵌套数据递归展示的应用，因为它属于组件应用，so，标题就这样写了，也顺带讲讲组件的通用应用。vue的组件运用得好，可替代任何模板插件，甚至做得更好。

其它如模板、数据绑定就不说了，上官网看个几分钟就会了。但是对于组件应用以及组件的高级应用(递归)，会让很多人理解起来比较费劲，也讲讲比较容易入坑的地方。

众所周知，vue的初始化是这样的(附常用初始属性名)：

var vue = new Vue({

el: “#app”,//选择器

data: [],//数据

component:{},//组件

method:{}//方法

});

每初始化一次，就生成一个封闭的应用空间，即在改选择器内只能使用当前初始化的东西，如数据，组件，方法。大多数情况下一个页面初始化一次就可以，也有少部分情况需要分开初始化。所以必须给大家灌输个思想：vue的初始化也有作用域，如同函数的作用域。所以如上方法的初始化组件只能在被调用一次，递归的话将会出现error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in

即使你已经指定了”name”, 主要是组件定义的方法不对，所以递归的组件请挂载在全局上：

Vue.component("list-bikes",{

template:"#bike-template",

props:["my_lists"]

});

var vue = new Vue({

...

});

全局的组件一定要在初始化之前定义，现在来看看使用模板组件实现复用递归是如何让实现的。假如有初始数据：

在这串代码之前先注册全局组件：

Vue.component("list-bikes",{

template:"#bike-template",

props:["my_lists"]

});

Html作用域中调用组件：

只有在id为app元素里面才能使用vue的语法，这里只有注册的组件，标签名为注册该组件的名字，同时组件中绑定了数据lists到组件的自定义属性my_lists，注意，组件的自定义属性不能有横杆-，组件中是通过调用my_lists间接调用lists数据的.

Html中写好把lists数据循环出来的通用模板,注意script的type类型：

• {{item.name}}

此模板里面根据条件又调用了自身一次，一定要限制条件，否则无穷无尽的调用，会报溢出错误。最终输出结果：