Блог

TLDR: пользовательские события ( $listeners ) не будут автоматически привязаны в сборке совместимости vue 3. Это похоже на то, как если бы все компоненты были бы inheritAttrs: false (хотя $attrs они будут привязаны и не включают class / style либо, как говорится в документах)

Я следовал официальному руководству по миграции vue 3 с помощью сборки compat, миграция должна была быть относительно легкой, однако, как и ожидалось, она кажется немного сложнее. Поэтому я добавил следующий код в vue.config.js :

 // Vue 2 =gt; Vue 3 migration config  config.resolve.alias.set('vue', '@vue/compat');   config.module  .rule('vue')  .use('vue-loader')  .tap((options) =gt; ({  ...options,  compilerOptions: {  compatConfig: {  MODE: 3,  },  },  }));  

Большая часть работы уже выполнена, однако я понял, что никто из слушателей, похоже, не работает. После некоторого расследования я обнаружил, что $listeners объект не будет автоматически привязан, как это должно быть. Они по какой-то причине не включены в $attrs объект и не будут унаследованы (я предполагаю, что они связаны).

Я попробовал INSTANCE_LISTENERS: false, вариант с обоими false true значениями и, к сожалению, ни то, ни другое, похоже, не сработало. Теперь единственный вариант, который я вижу прямо сейчас, — это добавление v-on="$listeners" ко всем компонентам, которые могут потребоваться для привязки каких-либо событий. Это, очевидно, не очень хорошее решение, оно взломано, и они также полностью удалены в vue 3, но я не мог придумать другого решения. Кто-нибудь еще испытывал то же самое и знал, может быть, лучшее решение для этого?

Заранее спасибо за вашу помощь!

Редактировать:

Я подумал, что, возможно, совместное использование зависимостей может помочь в обнаружении проблемы, поэтому вот они:

 "dependencies": {  "@apollo/client": "^3.5.5",  "@datadog/browser-logs": "^2.17.0",  "@datadog/browser-rum": "^2.17.0",  "@popperjs/core": "^2.10.1",  "@rd-internal/rd-vue-gtm": "^1.1.0",  "@vue/apollo-option": "^4.0.0-alpha.15",  "@vue/compat": "^3.2.23",  "@vue/runtime-dom": "^3.2.23",  "apollo-cache-inmemory": "^1.6.6",  "apollo-client": "^2.6.10",  "apollo-link": "^1.2.14",  "apollo-link-schema": "^1.2.5",  "apollo-upload-client": "^14.1.3",  "bootstrap": "^5.1.0",  "bootstrap-vue": "^2.21.2",  "chart.js": "^2.9.4",  "core-js": "^3.17.2",  "dayjs": "^1.10.6",  "graphql": "^15.7.2",  "graphql-tag": "^2.12.6",  "graphql-tools": "^4.0.7",  "intersection-observer": "^0.12.0",  "loader-utils": "^2.0.0",  "lodash.clonedeep": "^4.5.0",  "lodash.debounce": "^4.0.8",  "lodash.get": "^4.4.2",  "lodash.isequal": "^4.5.0",  "lodash.merge": "^4.6.2",  "lodash.set": "^4.3.2",  "lodash.some": "^4.6.0",  "normalize.css": "^8.0.1",  "papaparse": "^5.3.1",  "tinycolor2": "^1.4.2",  "v-tooltip": "^2.1.3",  "vue": "^3.2.23",  "vue-apollo": "^3.0.7",  "vue-chartjs": "^3.5.1",  "vue-ctk-date-time-picker": "^2.5.0",  "vue-i18n": "^9.2.0-beta.22",  "vue-meta": "^2.4.0",  "vue-router": "^4.0.12",  "vuelidate": "^0.7.6",  "vuelidate-error-extractor": "^2.4.1",  "whatwg-fetch": "^3.6.2"  },  "devDependencies": {  "@intlify/eslint-plugin-vue-i18n": "^1.2.0",  "@jagi/jest-transform-graphql": "^1.0.2",  "@testing-library/jest-dom": "^5.14.1",  "@typescript-eslint/eslint-plugin": "^4.30.0",  "@typescript-eslint/parser": "^4.30.0",  "@vue/cli-plugin-babel": "^4.5.15",  "@vue/cli-plugin-eslint": "^4.5.15",  "@vue/cli-plugin-typescript": "^4.5.15",  "@vue/cli-plugin-unit-jest": "^4.5.15",  "@vue/cli-service": "^4.5.15",  "@vue/compiler-sfc": "^3.2.23",  "@vue/eslint-config-airbnb": "^5.3.0",  "@vue/eslint-config-typescript": "^7.0.0",  "@vue/test-utils": "^1.2.2",  "babel-eslint": "^10.1.0",  "babel-jest": "^27.1.0",  "casual-browserify": "^1.5.19-2",  "change-case": "^4.1.2",  "eslint": "^7.32.0",  "eslint-plugin-import": "^2.24.2",  "eslint-plugin-sonarjs": "^0.10.0",  "eslint-plugin-unicorn": "^35.0.0",  "eslint-plugin-vue": "^7.17.0",  "eslint-plugin-vue-scoped-css": "^1.3.0",  "full-icu": "^1.3.4",  "glob": "^7.1.7",  "html-webpack-plugin": "^4.5.1",  "hygen": "^6.1.0",  "inflection": "^1.13.1",  "jest-junit": "^12.2.0",  "lint-staged": "^11.1.2",  "node-sass": "^6.0.1",  "sass-loader": "^10.2.0",  "sockjs-client": "^1.5.2",  "style-resources-loader": "^1.4.1",  "stylelint": "^13.13.1",  "stylelint-config-standard": "^22.0.0",  "stylelint-declaration-use-variable": "^1.7.3",  "stylelint-no-unsupported-browser-features": "^5.0.1",  "stylelint-order": "^4.1.0",  "stylelint-scss": "^3.20.1",  "ts-jest": "^24.3.0",  "typescript": "^4.4.2",  "vue-cli-plugin-webpack-bundle-analyzer": "~4.0.0",  "vue-composition-test-utils": "^1.0.3"  },