vue 一些用法整理 role=““

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>