vue-利用递归组件完成一个树形组件

这里写一个利用 利用递归组件完成一个树形组件

这里利用ul>li的方式进行基础 

tree.vue中，先写一个基础结构 当有子菜单的时候才显示 + 表示可点击

基础结构搭好以后，开始准备写递归组件

　　js:

export default {
  name: "item", //这里要和调用的名字相同
  props: {
    model: {
      type: Object,
      required: true
    }
  },

  data() {
    return { open: false };
  },
  methods: {
    toggleOpen() {
      this.open = !this.open; //显示和隐藏 注意.stop 阻止冒泡
    }
  }
};

父组件：

　　这里的数据结构需要注意一下

　　这里用的是递归组件，v-for中循环的每一项是一个对象，所以组件一开始也需要接受一个对象 

效果图：