0👍
✅
You can use the $parent
property:
<template>
<div>
App
<input type="text" v-model="propTest">
<Child />
</div>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
name: 'App',
components: { Child },
data: () => ({
propTest: 'abc',
}),
};
</script>
<template>
<div>
child
<button @click="test">Test</button>
</div>
</template>
<script>
export default {
name: 'Child',
methods: {
test() {
console.log(this.$parent.propTest);
},
},
};
</script>
Be careful with this property, you must use in edge cases: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance
Source:stackexchange.com