vue 递归 无限极
demo(父组件向子组件传值,将子组件注册进父组件中,父组件拥有子组件的功能)
- index.js
-
import Parent from '@/components/Parent' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Parent', name: 'Parent', component: Parent }, ] })
-
- list.vue
-
<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 name: "List", //通过props属性来声明一个自己的属性,然后父组件就可以往里面传递数据 props: { list: Array } }; </script> <style> .list-item{ padding-left: 20px; list-style: none; } </style>
-
- Parent.vue
-
<template> <div class="list-detail"> <list :list="list"></list> </div> </template> <script> //导入子组件 import List from './list' export default { name: "Parent", //注册子组件,应用 components: { List }, data() { return { list: [{ name: "少年", children: [{ name: "欣总", children: [{ name: "666" }, { name: "666" }] },{ name: "管总", children: [{ name: "777" }, { name: "777" }] }] }] } } } </script>
-
- 效果
本文来自博客园,作者:手可摘星辰/*,转载请注明原文链接:https://www.cnblogs.com/u-damowang1/p/13488733.html