vue官方示例_树形视图总结

效果展示

思维导图

github地址

 GitHub - jiang-lijun/tree_view

子组件向父组件传值

语法

vm.$emit( eventName, […args] )

参数

{string} eventName

[...args]

作用

触发当前实例上的事件。附加参数都会传给监听器回调。

用法：给当前元素添加子元素

<treeitem
            class="item"
            v-for="(child,index) in item.children"
            :key="index"
            :item="child"
            @make-folder="$emit('make-folder',$event)"
            @add-item="$emit('add-item',$event)"
          ></treeitem>

用法：给父元素添加子元素

<li @click="$emit('add-item',item)">+</li>

根据条件动态绑定样式

:class="{bold: isFolder}"

判断是否是有子元素，有的话则返回1，没有则是false

    computed: {
        // 判断是否是文件夹，如果有子文件则返回1，没有子文件则不是文件夹
        isFolder() {
            return this.item.children && this.item.children.length
        }
    },

根据条件判断是否切换状态

    methods: {
        // 判断是否是文件夹，是的话切换状态是否折叠
        toggle() {
            if(this.isFolder) {
                // console.log(1);
                this.isOpen = !this.isOpen
            }
        }
    }

函数式组件(props,children,slots,scopedSlots,data,parent,listeners,injections)

• props：提供所有 prop 的对象
• children：VNode 子节点的数组

• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。

• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用

• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

组件递归调用

使用name: '需要递归调用的组件名称'

创建子元素

语法：

Vue.set( target, propertyName/index, value )

ps：在模版中使用此方法需要导入vue

import Vue from 'vue'

用法：父组件

    makeFolder(item) {
      Vue.set(item, 'children',[])
      this.addItem(item)
    },
    addItem(item) {
      item.children.push({
        name: '新的文件'
      })
    }

用法：子组件（创建前先判断是否是文件夹，是的话不创建子文件，否则创建子文件)

          makeFolder: function() {
            if (!this.isFolder) {
              this.$emit("make-folder", this.item);
              this.isOpen = true;
            }
          }