堆栈内存溢出
  繁体   English   中英

如何修复 Vue3 中未定义的 defineExpose 方法

[英]How to fix defineExpose method not defined in Vue3

 原文  2022-06-12 11:42:19  6   3    javascript/ typescript/ vuejs3/ vite

问题描述

我正在尝试将方法从孩子传递给父母。 但不知何故defineExpose()方法不起作用。 你能指导我做错什么吗？

如果您需要更多详细信息，那么您可以参考我之前的问题

<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/compiler-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-components": "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-commit": "lint-staged"
  },
  "lint-staged": {
    "*.ts": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.scss": [
      "stylelint",
      "prettier --write"
    ],
    "*.md": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

在此处输入图像描述

任何解决方案表示赞赏！

3 个解决方案

解决方案1
 1  2022-07-06 22:09:05

如果您在 VS Code 中使用 Veture，请为您的项目工作区禁用它并改用Volar 。

解决方案2
 0  2022-06-12 15:05:57

我不确定您的代码有什么问题，因为您正在添加 defineExpose。 试试这段代码（我改变了几个变量，因为我的本地设置中没有它们）：

父.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>

孩子.vue

<script setup lang="ts">
import { Notyf } from 'notyf';
import { computed, defineProps, reactive, ref } 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",
  "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/compiler-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-components": "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-commit": "lint-staged"
  },
  "lint-staged": {
    "*.ts": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.scss": [
      "stylelint",
      "prettier --write"
    ],
    "*.md": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

解决方案3
 0  2022-07-12 12:44:18

似乎是一个 eslint 问题。 在defineExpose上方，您可以添加评论：

// eslint-disable-next-line no-undef
defineExpose({  })

或单击将鼠标悬停在defineExpose上时显示的快速修复按钮。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Vue 3 defineExpose 不公开子方法或属性 使用 Vue3 Reactivity Transform 宏和 defineExpose() 破坏 ref 的反应性 Vue3 onMounted 道具未定义 Vue3：为什么我的属性没有在实例上定义？ Vue 2.6.10 - 如何修复“属性或方法“索引”未在实例上定义，但在渲染期间被引用。 在 v-for 循环中 如何在 Vue3 中使用 FunctionDirective？ 如何使用 Vue3 修复客户端版本的“unsafe-eval”错误？ 如何在 Vue3 中使用 ref 访问父组件中的子组件方法？ Vue3如何将输入的值传递给@change =“func（param）”中的方法？ 如何异步导入所有 Vue3 组件？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM