现在我需要从父组件向子组件发出事件。我在 vue version 3 中看到$on，$off实例$once方法被删除了。应用程序实例不再实现事件发射器接口。
现在我如何可以从 vue 版本 3 中的父组件发出事件并从子组件监听？
我想通过在 Vue 组件中观察 Vuex 状态值来检测它的变化。我目前正在使用 Vue 3 和组合 API。我尝试过以下方法：
setup(props) {
const store = useStore();
watch(store.getters.myvalue, function() {
console.log('value changes detected');
});
return {
myvalue: computed(() => store.getters.myvalue)
}
},
但改变console.log()时不会被调用。myvalue
我读过许多与我类似的问题，但似乎没有一个能解决我的问题。我正在使用 Vue3、TypeScript、Jest 和 D3 v7。当我尝试时，import * as d3 from "d3";我在测试中收到此错误：
({"Object.<anonymous>":
function(module,exports,require,__dirname,__filename,global,jest)
{export * from "d3-array";
当我这样导入 d3 时也会出现此错误
import { BaseType, Selection, Transition, select } from "d3";
我尝试更新我的笑话配置的transformIgnorePatterns属性以进行读取，但这也不起作用：
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!d3-(array))",
]
有人可以向我解释一下我在这里缺少的部分吗？下面也是我的整个jest.config.js文件
module.exports = {
collectCoverageFrom: [
"**/src/**.ts",
"**/src/**/**.ts",
"!**/dist/**",
"!**/node_modules/**",
"!**/public/**"
],
errorOnDeprecated: true,
preset: "@vue/cli-plugin-unit-jest/presets/typescript",
testMatch: ["**/*.spec.ts", "!**/node_modules/**"],
testPathIgnorePatterns: ["<rootDir>/dist/", "<rootDir>/node_modules/"],
"modulePaths": [
"<rootDir>"
],
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!d3-(array))",
],
transform: {
"^.+\\.ts": "ts-jest",
"^.+\\.vue$": "vue-jest",
},
};
我正在使用带有模块 federation 和 vue3 的 berry 版本的纱线。
当我运行这些命令来创建项目的基础时：
mkdir vue-error
yarn set version stable
yarn plugin import workspace-tools
yarn init -pw
cd packages
npx create-mf-app # body
yarn
yarn workspace body add single-spa-vue
cd body
yarn start
我收到以下错误：
[webpack-cli] Failed to load '/Users/test/Development/trash/vue-error/packages/body/webpack.config.js' config
[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
at Object.<anonymous> (/Users/jcuzmar/Development/trash/vue-error/.yarn/__virtual__/vue-loader-virtual-8ff7836f4c/0/cache/vue-loader-npm-16.8.3-e05f7daca3-7c0566847b.zip/node_modules/vue-loader/dist/compiler.js:14:15)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.external_module_.Module._load (/Users/jcuzmar/Development/trash/vue-error/.pnp.cjs:17959:14)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18) …webpack vue.js yarn-workspaces vuejs3 webpack-module-federation
我尝试使用 将 prop 的默认值设置为本地值i18n。我正在使用 Vue 3.2 和脚本设置标签。
我已尝试以下操作，但这给了我一个错误：
DefineProps 引用本地声明的变量。
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
defineProps({
type: { type: String, required: true },
title: { type: String, required: false, default: `${t('oops', 1)} ${t('request_error', 1)}` },
description: { type: String, required: false, default: '' },
showReload: { type: Boolean, required: false, default: false },
error: { type: String, required: true },
});
</script>
处理这个问题的最佳方法是什么？
导出默认语句似乎在内部不起作用<script setup>。
如果我尝试将其导出为test.vue：
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
const x = 5
export default {
x
}
</script>
<style scoped lang="scss">
</style>
然后将其导入另一个blog.vue：
<script setup>
import x from './test'
</script>
我收到大量错误：
app.js?id=3b6365f542826af47b926162803b3ef6:37396 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of null (reading 'content')
at selectBlock (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/select.js:23:45)
at Object.loader (:3000/Users/artur/PhpstormProjects/safa-ameedee.com/node_modules/vue-loader/dist/index.js:67:41)
at Object../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:37396:7)
at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
at Module../resources/vue/backend/components/test.vue?vue&type=script&setup=true&lang=js (app.js?id=3b6365f542826af47b926162803b3ef6:60116:217)
at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42)
at Module../resources/vue/backend/components/test.vue (app.js?id=3b6365f542826af47b926162803b3ef6:59477:102)
at __webpack_require__ (app.js?id=3b6365f542826af47b926162803b3ef6:64806:42) …我有一个简单的可组合项useRoles，需要测试
import { computed } from "vue";
import { useStore } from "./store";
export default function useRoles() {
const store = useStore();
const isLearner = computed(() => store.state.profile.currentRole === "learner");
return {
isLearner
};
}
我的测试方法如下
import { afterEach, expect } from "vitest";
import useRoles from "./useRoles";
describe("useRoles", () => {
afterEach(() => {
vi.clearAllMocks();
vi.resetAllMocks();
});
it("should verify values when is:Learner", () => { // works
vi.mock("./store", () => ({
useStore: () => ({
state: {
profile: …我想用来onMounted启动第三方库。为此，我需要组件元素作为其上下文。在 Vue 2 中，我会使用它，this.$el但不确定如何使用组合函数来实现。setup有两个参数，没有一个包含元素。
setup(props, context) {
onMounted(() => {
interact($el)
.resizable();
})
}
有没有办法将 vue 3.0 安装到 Laravel 8？当我跑
npm install vue@next
它开始安装 Vue 3.0，但出于某种原因，它也开始安装vue-template-compilerv2.6.12。出现以下内容：
Run Code Online (Sandbox Code Playgroud)Additional dependencies must be installed. This will only take a moment. Running: npm install vue-template-compiler --save-dev --production=false
然后当我跑
npm run dev
出现以下错误：
- vue@3.0.0 (C:\wamp64\www\vue-sample\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\vue-sample\node_modules\vue-template-compiler\package.json)
这可能会导致事情无法正常工作。确保对两者使用相同的版本。如果您使用的是 vue-loader@>=10.0，只需更新 vue-template-compiler。如果您使用的是 vue-loader@<10.0 或 vueify，重新安装 vue-loader/vueify 应该会将 vue-template-compiler 提升到最新版本。
@ ./resources/js/app.js 19:35-79 @ 多 ./resources/js/app.js ./resources/sass/app.scss
我是 Vue 的新手。我该怎么办？
当我尝试在 vue3 中构建库时，我想设置多个输出文件。代码如下：
rollupOptions {
output: [
{
file: 'bundle.js',
format: 'cjs'
},
{
file: 'bundle.min.js',
format: 'iife',
name: 'version',
}
]
}
然后我会得到一个错误：
您必须为单文件构建设置“output.file”，或者在生成多个块时设置“output.dir””
那么，我该怎么做才能使这项工作成功呢？
投票：2.3.7