How to determine the parent component

I'm working on an existing program and I want to know if there is a way to determine which is the parent component of the child component ? In other words I want to realize from where I'm receiving the props

Assuming I have test.vue component and the purpose is to determine the value of 'title' where is coming from

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
  },

CodePudding user response：

You can use $parent :

const app = Vue.createApp({
  data() {
    return {
      msg: "one",
    };
  },
})

app.component('test', {
  template: `
    <div>{{ title }}</div>
    <hr />
    <p>From parent:</p>
    <div>{{ expectedProps }}</div>`,
  props: {
    title: {
      type: String,
      default: ''
    },
  },
  computed: {
    expectedProps() {
      return this.$parent.$data
    }
  }
}) 
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <test :title="msg"></test>
</div>