组件递归时不能使用 $emit 传递参数给父组件

问题描述

• 在自己实现一个 TreeData 组件时，想在点击某层结构时传递参数给父组件，直接使用 $emit(“方法”,参数) 触发时，父组件接受不到

解决方案：

• 在递归的组件上添加 v-bind=“$attrs” 就能触发了

<template>
  <div class="treeData">
    <div class="treeData-item" @click="toggleChildren(item)">
      <div class="treeData-item-text">{{ item.name }}</div>
    </div>
    <div v-show="isOpen" v-if="isFolder">
      <tree-data
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
        v-bind="$attrs"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    toggleChildren(item) {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      } else {
        // console.log("make folder=>", item.key);
        let key = item.key;
        this.$emit("key-click", key);
        // this.$storage.setItem("protectInfoKey", key);
      }
    },
  },
}