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