从组件中检测它是否在某个 DOM 父级中

Question

I currently have a Vue.js application in which I have used my own component. I want HTML DOM children components to be able know if they are contained in my component or just in the application itself. What would the best way to do it? I tried it using props, but as it is all contained within another application that does not seem possible.

example: I want the si-button to be able to determine that it is contained in a si-dialog. How do I pass that information to the si-button?

<si-dialog ref="siDialogChildren" name="children">
  <div>
    <h1>Hello children dialog!</h1>
    <p>Click outside the dialog to close this dialog.</p>
  </div>
  <si-button id="test" type="custom" :on-click="buttonPress">
    Click
  </si-button>
</si-dialog>

Yours sincerely,

Mirijam

Answer 1

You might want to use $parent as specified in the Vue documentation. For example, you can get the name of the parent component by accessing to its "$options.name" property.

Example:

App.vue

<template>
  <div id="app">
    <ParentComponent>
      <ChildComponent />
    </ParentComponent>
  </div>
</template>

<script>
import ParentComponent from './components/ParentComponent'
import ChildComponent from "./components/ChildComponent";

export default {
  name: 'App',
  components: {
    ParentComponent,
    ChildComponent
  }
}
</script>

<style>
</style>

ParentComponent.vue

<template>
  <div>
    <p>I'm a parent component.</p>
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: "ParentComponent",
  props: {},
  computed: {}
};
</script>

<style scoped>
</style>

ChildComponent.vue

<template>
  <div>
    <p>Parent name: {{componentName}}</p>
    <p>I'm inside a ParentComponent? {{componentName === "ParentComponent" ? "Yes!" : "No."}}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  computed: {
    componentName() {
        // We get the parent name from the $options.name property of our parent 
        // component
        return this.$parent.$options.name
    }
  }
};
</script>

<style scoped>
</style>

NOTE You can also access to other properties on the parent component by using the $parent property. Try it out!