标签: vuejs3

是否可以在生产环境中启用 Vue-Vite 中的源映射？

我想将它用于 Bugsnag。

在文档中找不到任何有关它的信息。

在开发中，它开箱即用。

我正在 vuejs 中编写一个应用程序，我想将 prop 传递给子组件，但我收到此错误：

props从的根范围获取值setup()将导致该值失去反应性

父组件

<template>
  <div>
      <course-list :courseId = "id"  />
  </div>
</template>

import {useRoute} from 'vue-router';
import { ref, onMounted, reactive} from 'vue';
export default defineComponent({
  components: { NavBar, CourseList, CourseContent },
  props:{
    courseId: String
  },
  setup(){
      const route = useRoute()

      const id = route.params.id
      console.log("the course id is", id);

    return{
      id
    }
  }
}

子组件

export default defineComponent({
  components: { CourseTopic },
  props: {
      courseId: {
        type: String
      }
    },
  setup(props) { …

我尝试编写一个容器组件“A”来布局第三方组件“Tree”，为了使用A，我使用“inheritAttrs”来获取“Tree”的所有道具和事件：

<template>
    <Tree v-bind="$attrs" />
</template>
<script lang="ts">
  export default {
    inheritAttrs: true,
  };
</script>
<script lang="ts" setup>
  import { Tree } from 'ant-design-vue';
  import { onMounted, PropType, toRef, unref, ref, toRefs } from 'vue';
  function A() {
      // this is not working
      console.log(props);
   }

</script>

如何在函数 A 中获得从“Tree”继承的一些 props 属性？

我想v-model在组件上添加 a 但收到此警告：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

这是我的代码：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

// Parent.vue
<template>
  <h2>V-Model Parent</h2>
  <Child v-model="name" label="Name" />
  <p>{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const name = ref('')
</script>

我试图重现本教程，但我被困住了，不知道我错过了什么。

{{ …

这是我的RequestList.vue组件

<template>
  <ion-item v-for="request in requests" @click="showRequest(request)" :key="request.id"
            text-wrap>
    <ion-label>
      <b>Name:</b> {{ request.event.name }}
      <br>
      <b>Venue:</b>{{ request.event.venue.name }}
      <br>
      <b>Date:</b> {{ request.event.date }}
    </ion-label>
  </ion-item>
</template>

<script>
import {useRouter} from 'vue-router'
import {IonItem, IonLabel} from '@ionic/vue'
import store from '@/store';
export default {
  components: {
    IonLabel,
    IonItem
  },
  props: {
    requests: Array
  },
  setup(props) {
    const router = useRouter()
    const showRequest= (request)=> {
      console.log('request', props.request);
      store.requests.setRequest(props.requests);
    };
    return {router, showRequest}
  }
}
</script>

我的store/modules/requests.js档案

import {computed, …

我正在尝试将 vuejs 3 集成到使用 webpack 的现有项目中。我读过 vue-loader，所以我正在尝试使用它。

在官方文档中，我有这个：

每次发布新版本的 vue 时，都会同时发布相应版本的 vue-template-compiler。编译器的版本必须与基础 vue 包同步，以便 vue-loader 生成与运行时兼容的代码。这意味着每次升级项目中的 vue 时，都应该升级 vue-template-compiler 以匹配它。

因此，当我尝试编译时，出现此错误：

Vue packages version mismatch:

- vue@3.0.2 (/home/alejo/playground/parquesFrontend/node_modules/vue/index.js)
- vue-template-compiler@2.6.12 (/home/alejo/playground/parquesFrontend/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

但是当我尝试安装 vue-template-compiler@3.0.2 时，我收到此错误：

? npm install vue-template-compiler@3.0.2
npm ERR! code …

我最近从 Vue 2 升级到 Vue 3，我的应用程序的某些部分在development模式下发出警告：

[Vue warn]：模板编译错误：具有副作用的标签（<script> 和 <style>）在客户端组件模板中被忽略。

在 Vue 2 中，这些警告只是隐藏在production. 然而，在 Vue 3 中，带有这些警告的页面完全崩溃，屏幕变成空白。他们运行良好development。

删除所有这些标签对我来说并不实际，<script>因为它们是由我的 CMS (Shopify) 动态插入的。

有什么方法可以让我在生产中捕获这些错误，这样它们就不会关闭我的网站吗？

我有一个父组件，我需要调用其子组件之一中存在的方法：

<template>
  <div>
    <button @click="callChildMethod">
    <child-component ref="child" />
  </div>
</template>
<script>
  setup(props) {
    const child = ref(null)
    const callChildMethod = () => {
      child.doSomething()
    }

    return {
      child,
      callChildMethod
    }
  }
</script>
  

子组件包含doSomething方法：

const doSomething = () => { console.log('calling method....') }

由于我使用的是 VueJS3 和 Composition API，因此我的方法是使用模板引用来调用子组件中的方法。显然不起作用，但我看不出我错过了什么。有人对这个有线索吗？提前致谢

Vue3 是否有相当于以下 Vue2 方法：

methods: {
   hasSlot(name) {
      return !!this.$slots[name]
   }
}

在 Vue3 的 Composition API 中？

我试过了：

setup({slots}) {
   const hasSlot = (name) => {
      return !!slots[name];
   }

   return { hasSlot }

}

但它没有返回预期值，因为slots未定义（控制台中的每个错误）。

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。

在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是，这个方法在组合 API 中不存在。这里，本来应该在 beforeRouteEnter 方法中的代码被直接写入 setup 方法中。但是，这意味着首先加载并显示组件，然后执行代码，如果检查失败，则组件将被重定向到错误页面等。

我的想法是直接在路由的 beforeEnter 方法中的路由配置中进行检查。但是，我无法访问 Pinia Store，尽管它之前在 main.js 中调用过，但它似乎尚未初始化。

控制台日志

Uncaught Error: []: getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

路由器.js

import { useProcessStore } from "@/store/process";

const routes: Array<RouteRecordRaw> = [
{
    path: "/processes/:id",
    name: "ProcessView",
    component: loadView("ProcessView", "processes/"),
    beforeEnter: () => {
      const processStore = useProcessStore();
      console.log(processStore); …