vue-component-recursion

vue组件嵌套

by li gang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
    <my-component :index="count"></my-component>
  </div>
</body>

JavaScript

const app = new Vue({
  el: '#app',
  data() {
    return {
      count: 1
    }
  },
  components: {
    myComponent: {
      name: 'my-component',
      props: ['index'],
      data() {
        return {
          count: this.index
        }
      },
      template: `<div v-if="count < 10">第个{{ count }}组件<my-component :index="count"></my-component></div>`,
      created() {
        console.log(this.count)
        this.count++;
        // this.$forceUpdate()
      }
    }
  }
})