1、role="treeitem" 可用于父级获取自己节点
子级:tabs-Demo-child.vue
<template>
<div class="child-main">
<div class="child-test" role="test">woshi</div>
<div class="child-test" role="test1">woshi2</div>
</div>
</template>
父级:tabs-Demo.vue
import child from './tabs-Demo-child'
export default {
name: 'table-color',
mounted() {
console.log(this.$el.querySelectorAll('.child-test[role=test]'))//打印
},
components: {
child
},
}
2、$emit、$on 自己组件用
<template>
<div class="child-main">
<div class="child-test" @click="ceshi">ceshi</div>
</div>
</template>
<script>
export default {
name: 'tabs-Demo-child',
methods: {
ceshi () {
console.log('dianji');
this.$parent.$emit('node-click', ['点击1']); // 子级触发事件
}
}
}
</script>
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from './tabs-Demo-child'
export default {
name: 'table-color',
created() {
this.$on('node-click',(event) => {
console.log(event, '<---event', 12); //父级接收
})
},
components: {
child
},
};
</script>