🔄 学习 - 递归组件

SLYLXDYMJ

字数：272 字

时长：1 分钟

比较常见的例子是 “树状结构” 和 “模态框的嵌套弹出”。

例子

例子中用了 iview 组件
核心逻辑是：组件中递归调用组件。

<template>
  <div class="root">
    <comp-modal value></comp-modal>
  </div>
</template>

<template>
  <div class="comp-modal">
    <Modal
      v-model="innerValue"
      footer-hide>
      {{ content }}
      <i-button @click="openNextModal">
        点我弹框
      </i-button>
    </Modal>

    <!-- 无限嵌套，组件中可以打开组件，这里必须 v-if，否则初始化时会无限递归 -->
    <comp-modal
      v-if="showNextModal"
      v-model="showNextModal"></comp-modal>
  </div>
</template>

<script>
  export default {
    name: 'comp-modal',
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        // 仅测试使用
        content: new Date().getTime(),

        // 是否显示下一个弹框
        showNextModal: false
      }
    },
    computed: {
      // 给 iview modal v-model 与父组件之间做一层代理
      innerValue: {
        get: function () {
          return this.value
        },
        set: function (newValue) {
          this.$emit('input', newValue)
        }
      }
    },
    methods: {
      openNextModal: function () {
        this.showNextModal = true
      }
    }
  }
</script>