1. 父组件:
- <template>
- <div class="balance">
- <son :item="chartData">
- </son>
- </div>
- </template>
- <script lang="ts">
- import {
- Component,
- vue
- }
- from "vue-property-decorator";
- import son from './son.vue'@Component({
- components: {
- son
- }
- })
2. 子组件
- <template>
- <div class="son">
- <ul v-for="item in item" :key="item.index">
- <li>
- {{ item.name }}
- </li>
- <ul v-if="item.children">
- <son :item="item.children">
- </son>
- </ul>
- </ul>
- </div>
- </template>
- <script lang="ts">
- import {
- Component,
- Vue,
- Prop
- }
- from "vue-property-decorator";@Component({}) export
- default class son extends Vue {@Prop(Array) item ! :[];
- mounted() {
- this.item;
- console.log(this.item);
- }
- }
- </script>
效果:
屏幕快照 2019-11-12 上午 10.19.03.PNG
来源: http://www.jianshu.com/p/7101923734ef