CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
mawa frh
mawa frh

Reputation: 35

How to determine the parent component - vuejs

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: ''
    },
  },

Upvotes: 1

Views: 1951

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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>

Upvotes: 4

Related Questions