标签: vue-composition-api

当我们将 prop 传递给组件并使用 DefineProps 从子组件定义该 prop 时，会以某种方式创建属性并可从子组件模板访问该属性。

父组件.vue

<template>
    <child-component v-model="product">
</template>

<script setup>
import childComponent from "./childComponent.vue"
</script>

子组件.vue

<template>
    {{ product }}
</template>

<script setup>
const props = defineProps(['product'])
</script>

在 childComponents 模板中，product无需使用props.product或 toRef 即可访问它。我知道脚本设置会自动注入使用过的道具，但我找不到任何信息（在文档中），defineProps 也做了一些事情。有没有这方面的信息。

我需要 VueJS 组件中的路由参数。例如中的42example.de/page/42。

// router
// ...
    {
      path: '/pages/:id',
      name: 'pages',
      component: () => import('../views/PageView.vue'),

    },  
// ...

// PageView.vue
<script setup>
    import { onMounted } from "vue";
    import { ref } from 'vue';

    onMounted(async () => {
      console.log(  $route.params.id );
   }

这里我得到错误： Uncaught (in promise) ReferenceError: $route is not defined。

但在组件的模板中，{{ $route.params.id }}可以进行访问。但我在剧本中需要它。我究竟做错了什么？

我正在尝试读取并更改在 Vue 2 + Vuetify 2 中使用组合 API 的值。this.$vuetify.dark现在this.myGlobalOption在组合 API 中不再可以访问该值，我该怎么做？我需要从模板内部和外部执行此操作。

我正在学习 Vue 并尝试使用组件标签学习动态渲染。这段代码有什么问题？控制台中没有显示任何错误，但单击按钮仍然不显示所需的组件。它确实可以与 v-if 一起使用，但我接下来的讲座的重点是使用组件动态渲染。哪个不起作用：

<template>
  <div>
    <the-header></the-header>
    <button @click="setSelectedComponent('active-goals')">Active goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage goals</button>
    <component :is="selectedTab"></component>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { ref, defineExpose, defineComponent } from 'vue';
import TheHeader from './components/TheHeader.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

const selectedTab = ref('active-goals');
const setSelectedComponent = (tab) => {
  selectedTab.value = tab;
};

defineExpose({
  selectedTab,
  setSelectedComponent,
});

defineComponent({
  components: {
    TheHeader,
    ActiveGoals,
    ManageGoals,
  },
});
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: …

我有一个 Vue 组件，用于与$route.
由于我进行了一些升级，它不再起作用，我收到消息：

[Vue warn]：无效的监视源：“$route”。监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。

这是我的package.json：

{
    "name": "prix-de-gros.vue",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue/composition-api": "0.6.6",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.5",
        "moment": "^2.27.0",
        "regenerator-runtime": "^0.13.7",
        "remove": "^0.1.5",
        "slugify": "^1.4.5",
        "tiptap-vuetify": "^2.24.0",
        "vue": "^2.6.12",
        "vue-i18n": "^8.21.0",
        "vue-router": "^3.4.3",
        "vuetify": "^2.3.9",
        "vuex": "^3.5.1",
        "webpack": "^4.44.1"
    },
    "devDependencies": {
        "@mdi/js": "^5.5.55",
        "@vue/cli-plugin-babel": "^4.5.4",
        "@vue/cli-plugin-eslint": "^4.5.4",
        "@vue/cli-plugin-router": "^4.5.4",
        "@vue/cli-plugin-vuex": "^4.5.4",
        "@vue/cli-service": "^4.5.4",
        "@vue/eslint-config-prettier": …

我为 Vue 2 编写了一个“加载状态”mixin：

export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      innerLoading: false,
    }
  },
  mounted () {
    this.innerLoading = !!this.loading
  },
  methods: {
    startLoading () {
      this.$emit('update:loading', this.innerLoading = true)
    },
    stopLoading () {
      this.$emit('update:loading', this.innerLoading = false)
    },
  },
  computed: {
    isLoading () {
      return !!this.innerLoading
    },
    isNotLoading () {
      return !this.innerLoading
    },
  },
  watch: {
    loading (loading) {
      this.innerLoading = !!loading
    },
  }
}

我将此混合用于其他组件以保持loading …

我将 Composition API 与 Vue 2（通过使用@vue/composition-api）结合使用，并结合以下两个库（@vuelidate/core": "^2.0.0-alpha.18、 @vuelidate/validators": "^2.0.0-alpha.15）。

我正在尝试检查sameAs输入的电子邮件和重复的电子邮件是否匹配，如果不匹配则返回错误。尽管这并没有想象中那么顺利。

这是我的validation.js文件

import { required, email, maxLength, sameAs } from "@vuelidate/validators";

export default {
  email: {
    required,
    email,
    maxLength: maxLength(100),
  },
  repeatEmail: {
    required,
    email,
    maxLength: maxLength(100),
    sameAsEmail: sameAs('email')
  },
}

这是我的validation-errors.js文件。（不过可能与这个问题无关）

export default { 
  email: [
    {
      key: "required",
      message: "Email is required.",
      id: "emailRequired",
    },
    {
      key: "email",
      message: "Wrong format on your email.",
      id: "emailFormat",
    },
    { …

我正在使用 vue 2.6.14 和composition-api 1.3.3 包来使用composition api。我有

我的 main.js 喜欢

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 
import App from './App.vue'
import router from './router' 
Vue.config.productionTip = false 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我尝试开一家商店

我有一个src folder / store folder / index.js

并在里面index.js

import { reactive } from '@vue/composition-api'  

const state = reactive({
    counter : 0
})

export default{ state }

在里面App.vue我尝试导入 store 来使用它

<script>  
import store from '@/store'  
</script>

我收到错误 …

当尝试使用 Vue2 和 Vuetify 使用组合 API 设置 Cypress 10 进行组件测试时，该指南非常令人困惑，并且显然不正确。有很多未知标签的错误，从setup()不可访问的返回的东西，不应该存在的传播运算符，不起作用的导入等等。设置以便测试有效的正确方法是什么？

首先链接到问题

https://stackblitz.com/edit/vue3-script-setup-with-vite-mx4xx2?file=package.json

要重现问题运行命令

npm run build\n

然后你会在日志中得到错误

\n

转换 (119) node_modules/lodash/_hashDelete.js\'emitter\' 由 emitter?commonjs-external 导入，但无法解析 \xe2\x80\x93\n将其视为外部依赖项

\n

尝试运行 npm runserve 会出现控制台错误

\n

未捕获的类型错误：无法解析模块说明符“发射器”。\n相对引用必须以“/”、“./”或“../”开头。

\n

我知道这个错误是由 package 引起的geostyler-sld-parser，特别是 App.vue 中的这一行

const sldParser = new SLDParser()\n

我需要这个包并成功运行构建/服务，有人知道如何正确配置 vite 吗？我尝试了一些插件，但到目前为止没有任何效果。