效果展示

思维导图

github地址

GitHub - jiang-lijun/tree_view

子组件向父组件传值

语法

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

参数

{string} eventName

[...args]

作用

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

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

<treeitemclass="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;}}

vue官方示例_树形视图总结相关推荐

vue.js示例_一个示例项目，展示了集成Vue.js和Lumino的一种方法
vue.js示例 Vue-lumino (vue-lumino) An example project showing one way to integrate Vue.js and Lumino ( ...
vue官方示例__todomvc总结
效果展示思维导图 Vue 动态绑定样式 <label class="content" :class="{'completed': todo.check}" ...
vue php tree,Vue 实现树形视图数据功能
这篇文章主要介绍了关于实现Vue 实现树形视图数据功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下利用简单的树形视图实现,熟悉了组件的递归使用这是模拟的树形图数据 let all ...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
vue 全局排序_搞定VUE [ 一 ]
击上方蓝字关注我首先.以我个人的观点,不赞成把这些东西死记下来,会使用,能上手做,有不明白的及时的去浏览.翻阅,在实战中去快速的理解和掌握,之后水到渠成式的一步步去走向深入.当然,从自身的职 ...
AXI-IIC官方示例解析
AXI-IIC官方示例解析说明:本文是作者自己对Xilinx的AXI-IIC的官方示例的解析,如有错误望各位指正. 文章目录 AXI-IIC官方示例解析前言 xiic_eeprom_example ...
baidumap vue 判断范围_懂一点前端—Vue快速入门
01. 什么是 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以数据驱动和组件化的思想构建的 ...
flask框架视图和路由_角度视图，路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
mysql中示例库安装_MySQL 官方示例数据库安装
虽然MySQL安装包中不像SQL Server和Oracle那样提供示例数据库,但官方也提供示例数据库以供学习使用. 官方示例数据库下载地址 http://dev.mysql.com/doc/ind ...

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

效果展示

思维导图

github地址

子组件向父组件传值

语法

参数

作用

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

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

根据条件动态绑定样式

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

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

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

组件递归调用

创建子元素

语法：

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

用法：父组件

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

vue官方示例_树形视图总结相关推荐

最新文章

热门文章