I am trying to pass the method from child to parent. But somehow defineExpose() method is not working. Can you please guide me on what I am doing wrong?
If you need more detail then you can refer to my previous question
<script setup lang="ts">
import { useHead } from '@vueuse/head'
import { pageTitle } from '/@src/state/sidebarLayoutState'
pageTitle.value = 'Saved Topical'
useHead({
title: 'Saved Topical',
})
defineExpose({
})
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "28.0.0",
"@ckeditor/ckeditor5-vue": "2.0.1",
"@iconify/iconify": "2.0.2",
"@mapbox/mapbox-gl-geocoder": "4.7.1",
"@popperjs/core": "2.9.2",
"@vueform/multiselect": "1.5.0",
"@vueform/slider": "1.0.5",
"@vuelidate/core": "^2.0.0-alpha.41",
"@vuelidate/validators": "^2.0.0-alpha.29",
"@vueuse/core": "5.0.3",
"@vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"@iconify/json": "1.1.358",
"@intlify/vite-plugin-vue-i18n": "2.2.1",
"@types/dragula": "3.7.0",
"@types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"@types/mapbox-gl": "^2.3.0",
"@types/markdown-it": "12.0.2",
"@types/node": "15.12.4",
"@types/nprogress": "0.2.0",
"@types/prismjs": "1.16.5",
"@types/simplebar": "5.3.3",
"@typescript-eslint/eslint-plugin": "4.27.0",
"@typescript-eslint/parser": "4.27.0",
"@vitejs/plugin-vue": "1.2.3",
"@vue/piler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-ponents": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-mit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Any solution appreciated!
I am trying to pass the method from child to parent. But somehow defineExpose() method is not working. Can you please guide me on what I am doing wrong?
If you need more detail then you can refer to my previous question
<script setup lang="ts">
import { useHead } from '@vueuse/head'
import { pageTitle } from '/@src/state/sidebarLayoutState'
pageTitle.value = 'Saved Topical'
useHead({
title: 'Saved Topical',
})
defineExpose({
})
</script>
{
"name": "vuero",
"version": "1.2.1",
"private": "true",
"license": "MIT",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "28.0.0",
"@ckeditor/ckeditor5-vue": "2.0.1",
"@iconify/iconify": "2.0.2",
"@mapbox/mapbox-gl-geocoder": "4.7.1",
"@popperjs/core": "2.9.2",
"@vueform/multiselect": "1.5.0",
"@vueform/slider": "1.0.5",
"@vuelidate/core": "^2.0.0-alpha.41",
"@vuelidate/validators": "^2.0.0-alpha.29",
"@vueuse/core": "5.0.3",
"@vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"@iconify/json": "1.1.358",
"@intlify/vite-plugin-vue-i18n": "2.2.1",
"@types/dragula": "3.7.0",
"@types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"@types/mapbox-gl": "^2.3.0",
"@types/markdown-it": "12.0.2",
"@types/node": "15.12.4",
"@types/nprogress": "0.2.0",
"@types/prismjs": "1.16.5",
"@types/simplebar": "5.3.3",
"@typescript-eslint/eslint-plugin": "4.27.0",
"@typescript-eslint/parser": "4.27.0",
"@vitejs/plugin-vue": "1.2.3",
"@vue/piler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-ponents": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-mit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Any solution appreciated!
Share Improve this question edited Jun 13, 2022 at 4:31 Robin Singh asked Jun 12, 2022 at 11:42 Robin SinghRobin Singh 1,7963 gold badges19 silver badges45 bronze badges 9- Looks like your editor doesn't know Vue3 – robertklep Commented Jun 12, 2022 at 12:23
- @robertklep The same issue es when i pile in the browser. Now, what are you thinking about the browser? – Robin Singh Commented Jun 12, 2022 at 12:31
- All other methods are working fine, only this method show me error. – Robin Singh Commented Jun 12, 2022 at 12:32
-
defineExpose()works fine for me in Vue3 ponents (but only valid in<script setup>), so perhaps you need to show a bit more context. Also, please post actual code instead of images. – robertklep Commented Jun 12, 2022 at 12:36 - 1 It seems that you are using veture extension. Volar is the official vue3 vscode extension which supports typescript as well. marketplace.visualstudio./items?itemName=Vue.volar. Can you also please include the parent ponent code? – Kalimah Commented Jun 12, 2022 at 14:46
4 Answers
Reset to default 1Had the same issue with Vue 3. Updating my TypeScript version from 4.5.5 to version 4.9.3 magically fixed it. Apparently older TypeScript version don't understand piler macros like defineExpose.
And also to mute the ESLint errors, I had to prefix it (like @stefan mentioned) with:
// eslint-disable-next-line no-undef
defineExpose({ });
If you are using Veture in VS Code, disable it for your project's workspace and use Volar instead.
Update
vue version must be 3.1.3 or greater because that is when defineExpose was introduced.
https://github./vuejs/core/blob/main/CHANGELOG.md#313-2021-07-01
I am not sure what is wrong with your code because you are adding defineExpose. Try this code (I changed few variables because I don't have them in 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 { puted, defineProps, reactive, ref } from 'vue';
const panySize = 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",
"scripts": {
"dev": "vite",
"dev:force": "vite --force",
"preview": "vite preview",
"build": "vite build",
"lint": "run-s lint:doc:fix lint:eslint:fix lint:stylelint:fix lint:prettier:fix",
"lint:prettier": "prettier --check \"./src/**/*.(ts|vue|css|scss)\"",
"lint:prettier:fix": "prettier --write \"./src/**/*.(ts|vue|css|scss)\"",
"lint:eslint": "eslint --ext .ts,.vue ./src",
"lint:eslint:fix": "eslint --fix --ext .ts,.vue ./src",
"lint:stylelint": "stylelint ./src/**/*.{vue,css,scss}",
"lint:stylelint:fix": "stylelint ./src/**/*.{vue,css,scss} --fix",
"lint:doc:fix": "run-s lint:doc:fix:*",
"lint:doc:fix:eslint": "eslint --fix --ext .md ./documentation",
"lint:doc:fix:prettier": "prettier --write \"./documentation/**/*.(md)\"",
"test": "run-p test:lint",
"test:tsc": "vue-tsc --noEmit",
"test:lint": "run-p lint:eslint lint:stylelint lint:prettier",
"e2e": "cypress run"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "28.0.0",
"@ckeditor/ckeditor5-vue": "2.0.1",
"@iconify/iconify": "2.0.2",
"@mapbox/mapbox-gl-geocoder": "4.7.1",
"@popperjs/core": "2.9.2",
"@vueform/multiselect": "1.5.0",
"@vueform/slider": "1.0.5",
"@vuelidate/core": "^2.0.0-alpha.41",
"@vuelidate/validators": "^2.0.0-alpha.29",
"@vueuse/core": "5.0.3",
"@vueuse/head": "0.6.0",
"apexcharts": "3.27.1",
"axios": "^0.22.0",
"billboard.js": "3.0.3",
"bulma": "0.9.3",
"dayjs": "1.10.5",
"dragula": "3.7.3",
"dropzone": "5.9.2",
"filepond": "4.28.2",
"filepond-plugin-file-validate-size": "2.2.4",
"filepond-plugin-file-validate-type": "1.2.6",
"filepond-plugin-image-crop": "2.0.6",
"filepond-plugin-image-edit": "1.6.3",
"filepond-plugin-image-exif-orientation": "1.0.11",
"filepond-plugin-image-preview": "4.6.6",
"filepond-plugin-image-resize": "2.0.10",
"filepond-plugin-image-transform": "3.7.6",
"firebase": "^9.6.2",
"imask": "6.0.7",
"mapbox-gl": "2.3.0",
"markdown-it-emoji": "2.0.0",
"notyf": "3.10.0",
"nprogress": "0.2.0",
"photoswipe": "4.1.3",
"simple-datatables": "3.0.2",
"simplebar": "6.0.0-beta.10",
"simplebar-vue": "2.0.0-beta.10",
"sweet-modal-vue": "^2.0.0",
"tiny-slider": "2.9.3",
"tippy.js": "6.3.1",
"trim-newlines": "^4.0.2",
"tslib": "2.3.0",
"v-calendar": "3.0.0-alpha.4",
"vue": "3.0.11",
"vue-i18n": "9.1.4",
"vue-js-modal": "^2.0.1",
"vue-router": "4.0.6",
"vue-scrollto": "2.20.0",
"vue-tippy": "6.0.0-alpha.29",
"vue3-apexcharts": "1.4.0",
"xmodal-vue": "^1.0.5"
},
"devDependencies": {
"@iconify/json": "1.1.358",
"@intlify/vite-plugin-vue-i18n": "2.2.1",
"@types/dragula": "3.7.0",
"@types/mapbox__mapbox-gl-geocoder": "^4.7.0",
"@types/mapbox-gl": "^2.3.0",
"@types/markdown-it": "12.0.2",
"@types/node": "15.12.4",
"@types/nprogress": "0.2.0",
"@types/prismjs": "1.16.5",
"@types/simplebar": "5.3.3",
"@typescript-eslint/eslint-plugin": "4.27.0",
"@typescript-eslint/parser": "4.27.0",
"@vitejs/plugin-vue": "1.2.3",
"@vue/piler-sfc": "3.1.1",
"cross-env": "7.0.3",
"cypress": "7.5.0",
"eslint": "7.29.0",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-md": "1.0.19",
"eslint-plugin-prettier-vue": "3.1.0",
"eslint-plugin-vue": "7.11.1",
"gray-matter": "4.0.3",
"lint-staged": "11.0.0",
"markdown-it": "12.0.6",
"markdown-it-anchor": "8.0.3",
"npm-run-all": "4.1.5",
"plyr": "3.6.8",
"prettier": "2.3.1",
"prismjs": "^1.25.0",
"rimraf": "3.0.2",
"rollup": "2.52.1",
"sass": "1.32.13",
"stylelint": "^14.2.0",
"stylelint-config-prettier": "8.0.2",
"stylelint-config-standard": "^24.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "4.3.4",
"vite": "2.3.8",
"vite-imagetools": "3.6.8",
"vite-plugin-ponents": "0.11.2",
"vite-plugin-fonts": "0.2.2",
"vite-plugin-imagemin": "^0.1.0",
"vite-plugin-pages": "0.13.2",
"vite-plugin-purge-icons": "0.7.0",
"vite-plugin-pwa": "0.8.1",
"vite-plugin-radar": "0.2.0",
"vue-tsc": "^0.3.0",
"yorkie": "2.0.0"
},
"gitHooks": {
"pre-mit": "lint-staged"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
],
"*.scss": [
"stylelint",
"prettier --write"
],
"*.md": [
"eslint --fix",
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write"
]
}
}
Seems to be an eslint Problem. Above defineExpose you can add the ment:
// eslint-disable-next-line no-undef
defineExpose({ })
or click the quick Fix button that shows up if you hover over defineExpose.