Important Update!
In order for your Vue code to work correctly, make sure you are using version 3.1.3 or higher as this is when the `defineExpose` feature was introduced.
For more information, check out the changelog at here.
I'm not entirely certain what's causing the issue in your code where you're trying to add `defineExpose`. Here's a modified version of your code (I adjusted some variables due to my local setup):
Parent.vue
<script setup lang="ts">
import { ref } from 'vue';
import { Notyf } from 'notyf';
import Child from './Child.vue';
const addNewPaper = ref();
const notyf = new Notyf();
const successSave = () => {
addNewPaper.value.savePaper();
notyf.success('Your paper has been successfully created!');
};
</script>
<template #content>
<input type="button" @click="successSave" value="Save" />
<Child ref="addNewPaper"></Child>
</template>
Child.vue
<script setup lang="ts">
import { Notyf } from 'notyf';
import { computed, defineProps, reactive, ref, defineExpose } from 'vue';
const companySize = ref('');
const businessType = ref('');
const productToDemo = ref('');
const date = ref(new Date());
const initialState = reactive({
subject: '',
paper: '',
marks: '',
});
const notyf = new Notyf();
const props = defineProps({
subjects: { required: true },
});
const savePaper = () => {
notyf.success('Paper saved successfully');
};
defineExpose({
savePaper,
});
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
// Additional dependencies and devDependencies truncated for brevity
}