标签: vuejs3

我可以通过以下方式获取 vue js 2 中的组件名称：this.$options.name。如何在 vue js 3 中获取它？

谢谢。

有没有办法检测自定义组件中 modelValue 的更改？我想将更改推送到所见即所得编辑器。

我尝试监视 modelValue，但发出 modelValue 更新触发了该监视，从而创建了循环数据流。

代码：

export default {
  props: ['modelValue'],
  watch: {
    modelValue (val) {
      this.editor.editor.loadHTML(val)
    }
  },
  mounted () {
    this.editor.editor.loadHTML(val)
    this.editor.addEventListener('trix-change', 
      (event) => this.$emit('update:modelValue', event.target.value))
  }
}

<TextEditor v-model="someHtml"></TextEditor>

注意：我正在使用的示例可在 GitHub 存储库https://github.com/mary-perret-1986/primevue-poc上找到

我使用 Vue.js 3 + Vite + PrimeVue 创建了一个简单的项目。

到目前为止，当我正在开发并且正在为构建提供服务时（即/dist服务器提供构建（即）时，一切都像魅力一样。

但我想看看我是否可以打开/dist/index.html直接从浏览器打开......我的意思是，从技术上讲，这应该是可能的。

以下是配置部分：

package.json

{\n  "name": "my-vue-app",\n  "version": "0.0.0",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite build && vite preview"\n  },\n  "dependencies": {\n    "primeflex": "^2.0.0",\n    "primeicons": "^4.1.0",\n    "primevue": "^3.2.0-rc.1",\n    "vue": "^3.0.5",\n    "vue-property-decorator": "^9.1.2",\n    "vue-class-component": "^8.0.0-0",\n    "vue-router": "^4.0.0-0",\n    "vuex": "^4.0.0-0"\n  },\n  "devDependencies": {\n    "@types/node": "^14.14.37",\n    "@vitejs/plugin-vue": "^1.2.1",\n    "@vue/compiler-sfc": "^3.0.5",\n    "sass": "^1.26.5",\n    "typescript": "^4.1.3",\n    "vite": "^2.1.5",\n    "vue-tsc": "^0.0.15"\n …

代码笔：https ://codepen.io/codingkiwi_/pen/XWMBRpW

假设你有一堂课：

class MyClass {
  constructor(){
    this.entries = ["a"];

    //=== example change triggered from INSIDE the class ===
    setTimeout(() => {
      this.entries.push("c");
    }, 1000);
  }
}

在组件中，您可以获得该类的一个实例：

const { reactive } = Vue;

const App = {
  setup() {
    const myobject = reactive(new MyClass());

    //=== example change triggered from OUTSIDE the class ===
    setTimeout(() => {
      myobject.entries.push("b");
    }, 500);
    
    return {
      myobject
    };
  }
}

DOM 中的 myobject.entries 数组将显示条目"a"和"b"，但不显示"c"

考虑以下使用 Vue 3 中的组合 API 的简单示例。我试图test在我的组件的函数中拥有可用的实例。

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'Test',
  setup(){
    let test = ref()
    
    onMounted(() => {
      doSomething()
    })

    return{
      test,
      doSomething
    }
  }
})

function doSomething(){
  console.log(test) //<-- undefined
  console.log(this.test) //<-- undefined
}
</script>

我如何进入test内部doSomething()？我的理解是，返回的任何内容都setup()应该在整个组件中可用，就像data()选项 API 中的属性一样。

我已经从 Laravel Mix 切换到 Vite，并且正在尝试完成“npm run watch”为 Laravel Mix 所做的同样的事情。注意：我们的临时服务器不是本地的（即 staging.app-domain-name.com）。如果我使用 Vite 运行 npm run dev ，它会加速应该位于 http://ip:3000 的“dev”服务器，但这显然不起作用。除了没有活跃的观察者之外，我无法让开发人员与 Vue Devtools 插件一起使用（因为 vite 只能在服务器上吐出产品）。

我的 vite.config.js：

const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/dist/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: resolve(__dirname, 'public/dist'),
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },

    server: {
        host: true,
        port: '8080',
        hot: true
    },

    plugins: [vue()],

    resolve: {
        alias: …

我有一个用 Vue 编写的简单应用程序。我想要的只是在 Vue.createApp() 方法之外调用 Vue 中的一个自定义方法。

我的代码：

const app = Vue.createApp({
data() {
    return {
        data: ["this","is","an", "example"],
    }
 },
 methods: {
  getData() {
    return this.data;
  },
 },
});


app.mount('#app');

// This instruction fails!
console.log(app.getData());

当我尝试执行最后一行的方法时，我进入控制台：

Uncaught TypeError: Cannot read property 'content' of undefined

为什么我无法执行该方法？怎么了？

我创建了一个由两个主要组件组成的小应用程序，我使用 vue 路由器在组件之间进行路由。

第一个组件称为 MoviesList，第二个组件称为 Movie。我已将它们注册到routes js 文件中。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: MoviesList
  },

  {
    path: '/:movieId',
    name: 'Movie',
    component: Movie
  }
  
]

我的 App.vue 模板如下所示

<template>
   <router-view></router-view>
</template>

如何使 MovieList 组件缓存起来，或者说它是用<keep-alive>标签包裹的？期望的结果是缓存 MovieList 组件，而不缓存 Movie 组件。

我想这样做，因为 MovieList 组件有一个在 Mounted() 钩子上运行的方法，每当我切换路由并返回时，该方法都会再次运行，因为组件被重新渲染。

从 'axios' 导入 axios；

结果导致投掷

未捕获的语法错误：找不到导入：默认值

import { createApp } from 'vue';
import TheContainer from './components/TheContainer.vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

const app = createApp({
    components: {
        TheContainer
    }
})
app.axios = axios;
app.$http = axios;
app.config.globalProperties.axios = axios;
app.config.globalProperties.$http = axios;
app.mount('#app');

这是使用 axios 0.21.1 和 vue 3.0.5

试图找出问题所在...vuejs v3 Cookbook 遗憾地使用通过 CDN 调用 axios 0.14 代码

当 prop 更新时如何调用函数？

父容器：

<div>     
  <Maintable :type="typeRef" :country="countryRef" />
</div>

子容器：

    export default{

    props: ['type'],
    
    setup(props)
    {   
        watch(props.type, () => {
            console.log('hello')
        })
    }

此代码收到错误：无效的监视源...我如何侦听道具的更新？

希望有人可以帮助我！:-)