Vue.js 组件层级关系设置指南：使用 $emit 和 $on

在 Vue.js 中，可以使用 $emit 和 $on 来设置组件之间的层级关系。

使用 $emit 在父组件中触发事件，将子组件之间的层级关系传递给子组件。例如，在父组件中可以触发一个事件，将子组件的层级关系作为参数传递给事件处理函数。

// 父组件
<template>
  <div>
    <child-component @set-level='setLevel'></child-component>
    <child-component :level='level'></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      level: null
    };
  },
  methods: {
    setLevel(level) {
      this.level = level;
    }
  }
};
</script>

在子组件中使用 $emit 将层级关系传递给父组件。例如，在子组件中可以触发一个事件，将子组件的层级关系作为参数传递给父组件。

// 子组件
<template>
  <div>
    <button @click='setLevel('top')'>置顶</button>
    <button @click='setLevel('bottom')'>置底</button>
  </div>
</template>

<script>
export default {
  methods: {
    setLevel(level) {
      this.$emit('set-level', level);
    }
  }
};
</script>

在父组件中使用 $on 监听子组件触发的事件，获取子组件的层级关系。

// 父组件
<script>
export default {
  created() {
    this.$on('set-level', this.setLevel);
  },
  methods: {
    setLevel(level) {
      this.level = level;
    }
  }
};
</script>

通过以上步骤，可以在 Vue.js 中设置组件之间的层级关系。