标签: vuejs3

拜托，我正在学习 VueJS 3，我可能有初学者问题。我在浏览器开发者控制台中发出了这样的警告：

消息是：

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

我正在将对象数组传递给子组件。在我的父views/Home.vue组件中，我有这样的实现：

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

在子组件中components/ItemProperties.vue我有以下代码：

<template>\n  <div class="wrapper">\n    <section v-for="(item, index) in items" :key="index" class="box">\n      <ItemProperties class="infobox-item-properties" :info="item.properties" />\n    </section>\n …

我正在使用 Vue 3 和 Vite。在 Vite 构建生产后，我遇到了动态 img src 的问题。对于静态 img src 没有问题。

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>

它在两种情况下都运行良好：在开发模式下运行时以及在 vite 构建之后。但我有一些图像名称存储在动态加载的数据库中（菜单图标）。在这种情况下，我必须像这样编写路径：

<img :src="'/src/assets/images/' + menuItem.iconSource" />

（menuItem.iconSource 包含图像的名称，如“my-image.png”）。在这种情况下，它在开发模式下运行应用程序时有效，但在生产构建后无效。当 Vite 为生产构建应用程序时，路径会发生更改（所有资源都放入_assets文件夹中）。静态图片源是由Vite build处理的，路径也会相应改变，但合成图片源则不然。它只是/src/assets/images/作为一个常量，不会改变它（当应用程序抛出 404 not find for image /src/assets/images/my-image.png 时，我可以在网络监视器中看到它）。我试图找到解决方案，有人建议使用require()，但我不确定 vite 是否可以使用它。

我试图遵循文档并创建vite.config.js如下：

const config = {
  outDir: '../wwwroot/',
  proxy: {
    // string shorthand
    '/foo': 'http://localhost:4567',
    // with options
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
};

export default config;

并尝试通过以下调用对其进行测试：

fetch('/foo');
fetch('/api/test/get');

我本来期望有实际的请求，http://localhost:4567/foo但http://jsonplaceholder.typicode.com/test/get 它们都以我的开发服务器作为源，如下所示：http://localhost:3000/foo和http://localhost:3000/api/test/get

难道是我理解错了？代理应该如何工作？

我还在 Vite 存储库中创建了一个问题，但它已关闭，而且我不明白结束评论。

我正在尝试使用 Composition API 在 Vue 3 中获取 $refs。这是我的模板，它有两个子组件，我需要获取对一个子组件实例的引用：

<template>
    <comp-foo />
    <comp-bar ref="table"/>
</template>

在我的代码中，我使用Template Refs： ref 是一个特殊属性，它允许我们在安装后获取对特定 DOM 元素或子组件实例的直接引用。

如果我使用 Options API 那么我不会有任何问题：

  mounted() {
    console.log("Mounted - ok");
    console.log(this.$refs.table.temp());
  }

但是，使用 Composition API 时出现错误：

setup() {
    const that: any = getCurrentInstance();
    onMounted(() => {
      console.log("Mounted - ok");
      console.log(that.$refs.table.temp());//ERROR that.$refs is undefined
    });
    return {};
  }

谁能告诉我如何使用 Composition API 来做到这一点？

看一些人的 Vue 3 预览教程的一些例子。 [目前是测试版]

我找到了两个例子：

反应式

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

参考

<template>
  <div>
    <h2 ref="titleRef">{{ formattedMoney }}</h2>
    <input v-model="delta" type="number">
    <button @click="add">Add</button>
  </div>
</template>

<script>
import { ref, computed, …

我正在 Laravel 项目中开发 VueJS 3，并且正在使用一个 JS 文件，该文件为我提供了用于 Markdown 工具栏的元素。基本上，它是一组函数，为我提供了应用所选降价选项的按钮。一切工作正常，但我收到了那些我希望它们消失的控制台错误。

它们都与此类似：

Failed to resolve component: md-linedivider
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Markdowntoolbar> 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__bounceOutUp" mode="out-in" > 
  at <RouterView> 
  at <App> 
  at <Bodycomponent> 
  at <App>

这就是说，应通过compilerOptions.isCustomElement 将 md-linedivider 元素从组件解析中排除。我确实到处寻找解决方案，但只找到了这个，但我的 laravel 项目中没有 vue.config.js 来应用它。我尝试在 webpack.mis.js 和 app.js 中执行此操作，但没有成功。

有人有什么想法吗？

我有以下组件：

<SomeModal :is-modal-active="isAddingThing" @close="isAddingThing = false" />

该组件内部如下所示：

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    isModalActive: Boolean,
})

const handleClose = () => {
    emit('close') // doesn't work
}
</script>

<template>
<V-Modal @close="handleClose">
    ...
</V-Modal>
</template>

我如何发送给父母？

虽然Vue Composition API RFC 参考站点有很多watch模块的高级使用场景，但没有关于如何观看组件 props 的示例？

在Vue Composition API RFC 的主页或Github 中的 vuejs/composition-api 中也没有提到它。

我创建了一个Codesandbox来详细说明这个问题。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <br>
    <p>Prop watch demo with select input using v-model:</p>
    <PropWatchDemo :selected="testValue"/>
  </div>
</template>

<script>
import { createComponent, onMounted, ref } from "@vue/composition-api";
import PropWatchDemo from "./components/PropWatchDemo.vue";

export default createComponent({
  name: "App",
  components: {
    PropWatchDemo
  },
  setup: (props, context) => {
    const testValue = ref("initial");

    onMounted(() => …

如何在 Vue 3 中创建事件总线？

在 Vue 2 中，它是：

export const bus = new Vue();

bus.$on(...)
bus.$emit(...)

在 Vue 3 中，Vue不再是构造函数，而是Vue.createApp({});返回一个没有$on和$emit方法的对象。

找不到任何东西来解决这个看似明显的问题。

刚刚使用 Typescript 从 Vue 2 升级到 Vue 3 和 Vuex。

尽管遵循 Vue 3 说明，但 this.$store 似乎无法访问。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：属性 '$store' 不存在于类型 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、字符串、{}>>'。

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 | 

主文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import …