小知识点：
- 如果你的文件是不需要编译的最后文件名前加一个下划线(_)，比如_var.scss
2.vue的属性不能以data开头，否则转成默认属性
比如：datasource只能写成source
3.如果你在当前组件中使用了与你name相同的标签，那么name就是你当前的组件
4.我们不知道要渲染的数据有多少层，我们该怎么用v-for遍历？
比如有些区下面有镇，有的没有，也就是说无法确定当前数据数组有几层的情况下，那么我们可以通过递归组件让组件（通过组件自己调用自己来实现）
小案例
- index.html
- cascader.vue
- cascaderitem.vue
{{sourceItem.name}}
上面的代码在index里使用了cascader.vue这个组件，这个组件接受父组件传进来的source数组，
然后遍历最开始的数组，拿到数组里面第一层的每一项，之后通过递归组件cascaderitem.vue接受你拿到的数组第一层的每一项（对象），显示你这每一项里面的name，然后调用自己再次进行遍历判断你传进来的sourceItem.children是否存在，如果存在就继续遍历souceItem.children，把拿到的新的对象item传给souceItem，然后再次显示这里面每一项的name，直到对应的item下面的children不存在为止。这里要注意递归组件自己本身要传入的属性，在自己内部也要再写一遍，就像上面的:sourceItem="item"
以上面的案例为例，一开始在cascader.vue组件里传入的是最开始的数据，然后遍历分别拿到的item是
{
name: '浙江',
children: [
{
name: '杭州',
children: [
{name: '上城'},
{name: '下城'},
{name: '江干'}
]
},{
name: '嘉兴',
children: [
{name: '南湖'},
{name: '秀洲'},
{name: '嘉善'}
]
}
]
},
{
name: '福建',
children: [
{
name: '福州',
children: [
{name: '鼓楼'},
{name: '台江'},
{name: '苍山'}
]
}
]
}
上面两个对象，之后分别调用递归组件把这两个对象作为item依次传进去，开始执行cascaderitem.vue组件里的代码，以第一个浙江的为例，拿到{{sourceItem.name}}也就是浙江，然后执行下面的代码
也就是把当前的组件里的代码再执行一遍，它先判断sourceItem.children是否存在，因为sourceItem.children是
{
name: '杭州',
children: [
{name: '上城'},
{name: '下城'},
{name: '江干'}
]
}
{
name: '嘉兴',
children: [
{name: '南湖'},
{name: '秀洲'},
{name: '嘉善'}
]
}
所以再次对上面的对象也就是sourceItem.children再次进行遍历，得到的item分别为上面的两个，然后把这两个赋值给sourceItem，也就是sourceItem分别是杭州和嘉兴下面的对象，然后再分别使用这个组件，如此循环，最终得到下面结构
- 属性不要以show开头，因为以show开头的都是函数
页面渲染初步实现
- 正常情况下在已知有几层数据的情况下的视图渲染这里以上面的三层为例
{{item.name}}
{{item2.name}}
{{item3.name}}
上面的代码一开始通过点击popover使leave显示，leave里面分了三层div，遍历第一层，点击第一层里对应的内容，比如浙江，把与浙江有关的数据添加到一个一开始为null的属性里，然后通过计算属性返回它里面的children，之后在第二层里遍历它，同样把当前下面的数据赋值给leave3，然后通过计算属性返回这个数据下的children再次遍历
- 改进：上面1的代码虽然实现了我们的功能，但是就像我们一开始说的我们根本不知道当前会有几层数据，所以我们还是需要通过递归的形式
- cascaderitem.vue
{{item.name}}
- cascader.vue
上面的代码就是每次分为左边区域跟右边区域，然后你下次在你的右边里再次显示你的左边，依次类推，不断的在右侧调用你这个组件，也就是不断的在右侧显示你的左侧
让用户可以自定义高度
通过给cascader.vue传入一个height，然后在它中的props里声明这个height，然后再在cascader.vue中把这个height传给cascader-items.vue，在这里面设置style为你的height
- index.html
- cascader.vue
- cascader-items.vue
{{item.name}}
- cascader.vue
- cascader-item.vue
{{item.name}}