vuethis.$parent的简单介绍
vue封装树形组件
最近在做一个vue的项目，独立封装树形组件。
先说一下项目需求：
1.项目原型：
此树形结构分为三级：根节点，一级节点，二级节点，每个节点都可以选中或取消选中，父级节点选中，下级的所有节点也可全部选中。二级节点中有不可选中的节点
2.后台返回的数据结构：
this.menuList = [{id:1,menuName:'首页',type:1,parentId:0},
{id:2,menuName:'首页1',type:0,parentId:1},
{id:3,menuName:'首页2',type:0,parentId:1},
{id:5,menuName:'首页3',type:1,parentId:1},
{id:6,menuName:'报告看板',type:1,parentId:0},
{id:7,menuName:'看板1',type:2,parentId:6},
{id:8,menuName:'看板2',type:2,parentId:6},
{id:9,menuName:'数据中心',type:1,parentId:0},
{id:10,menuName:'数据中心1',type:1,parentId:9},
{id:10,menuName:'数据中心2',type:2,parentId:9}];
其中parentId为0 的为父节点，1为可以选择的子节点，2为已经选中的子节点
根节点为前端写死的节点
3.html页面
4.最终实现的效果
vue如何根据点击父组件跳转子组件而且选中子组件的默认第一个组件
ps:App.vue 父组件
Hello.vue 子组件
!--App.vue :--
template
div id="app"
hello @newNodeEvent="parentLisen" /
/div
/template
script
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
/script
!--Hello.vue :--
template
div class="hello"
input type="button" name="" id="" @click="chilCall()" value="子调父" /
/div
/template
script
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
/script