Vue组件如何判断自身是否处于指定自定义父组件内部？

Hey Mirijam，我之前也碰到过类似的嵌套组件检测需求，这里有两个靠谱的解决方案，完美适配你说的场景：

方案1：用Provide/Inject（首推！） #

这是Vue官方专为跨层级组件通信设计的方案，完全不用像props那样逐层传递，不管嵌套多少层都能直接拿到数据。

首先在你的si-dialog组件里添加provide，对外提供一个标识：

// si-dialog.vue
export default {
  name: 'si-dialog', // 记得设置组件name，后面方案2也会用到
  provide() {
    return {
      isInsideSiDialog: true
    }
  },
  // 你的其他组件逻辑...
}

然后在si-button组件里注入这个标识，默认值设为false（对应不在dialog里的情况）：

// si-button.vue
export default {
  inject: {
    isInsideSiDialog: {
      default: false
    }
  },
  mounted() {
    // 这里就可以轻松判断啦
    if (this.isInsideSiDialog) {
      console.log('我在si-dialog内部哦！')
      // 这里可以写只有在dialog里才执行的逻辑
    } else {
      console.log('我不在si-dialog内部~')
    }
  },
  // 你的其他组件逻辑...
}

就像你示例里那样，哪怕si-button被包在div里再嵌套到dialog里，inject也能准确拿到provide的值，完全不用担心层级问题。

方案2：遍历父组件链检测 #

如果你不想用provide/inject，也可以通过遍历组件的父级链来判断。这种方法不用修改父组件，只需要在子组件里写逻辑：

// si-button.vue
export default {
  mounted() {
    let currentParent = this.$parent
    let isInDialog = false
    // 一层层往上找父组件，直到根组件
    while (currentParent) {
      // 检查父组件的name是否是我们要找的'si-dialog'
      if (currentParent.$options.name === 'si-dialog') {
        isInDialog = true
        break // 找到就停止遍历
      }
      currentParent = currentParent.$parent
    }
    console.log(isInDialog ? '我在si-dialog里面！' : '我不在si-dialog里面！')
  }
}

不过用这个方法要注意：必须确保si-dialog组件已经正确设置了name属性（就像方案1里那样），不然匹配不到。另外如果组件嵌套特别深，遍历可能会有一点点性能损耗，但一般业务场景下完全可以忽略。

针对你的示例代码的说明 #

你的示例里si-button嵌套在si-dialog内部的div中，用上面两种方法都能准确检测到它处于dialog内部。个人更推荐方案1，因为它更符合Vue的设计思路，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者Mirijam