一.什么是递归组件?
简单来说就是在组件中内使用组件本身,下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。
首先我们先创建一个 List 的递归组件
<template>
<div>
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="item-name">
<span>{{item.name}}</span>
</div>
<div v-if="item.children" class="children-item">
<list :list="item.children"></list>
</div>
</div>
</div>
</template>
<script>
export default {
name: "List",
props: {
list: Array
}
};
</script>
注意上面的代码中我们使用了 List 组件本身,完成这些之后,我们在外部父级组件中使用 List 组件时,不管我们的数据有多少层嵌套关系,都可以完美的自适应加载,我们再也不用通过嵌套嵌套在嵌套了。
<template>
<div class="list-detail">
<list :list="list"></list>
</div>
</template>
<script>
import List from "./components/List";
export default {
name: "Parent",
components: { List },
data() {
return {
list: [{
name: "经济",
children: [{
name: "如家",
children: [{
name: "上江路-如家"
},
{
name: "望江路-如家"
}]
},{
name: "7天",
children: [{
name: "长江路-7天"
},
{
name: "望江路-7天"
}]
}]
}]
}
}
}
</script>
二.v-model的本质是啥
v-model本质上是什么,或谁的语法糖
v-model本质上是用value属性,input事件实现的
“v-model 实现双向绑定本质上就是一种语法糖,它即可以支持原生表单元素,也可以支持自定义组件。在组件的实现中,可以配置组件接收的 prop 名称,以及派发的事件名称。
实现原理:Object.defineProperty()