咫尺天涯的专栏

vue3.x项目需要显示甘特图，经学习研究，目前应用比较多的甘特图技术是dhtmlx，这篇文章将简单的介绍其在vue3.x中的应用。1.下载安装npm install dhtmlx-gantt或yarn add dhtmlx-gantt2.编写Gantt组件<template> <div ref="ganttRef"></div></template>import { onMounted, ref } from 'vue'imp.

在开发过程中，希望用组件的props接收路由的参数。直接写在路径中传递假设路径：/user/u123456route中的设置如下，路径中的参数用:修饰，props设置为trueconst routes = [ { path: '/user/:id', component: () => import('@/views/user/index.vue'), props: true }]在组件的props中声明路径中的变量即可export default.

在开发过程中，遇到了组件引用自身的情况，在此记录一下需要注意的问题。如何引用需要给组件设置name，然后在模板中直接引用即可。<template> <example-component></example-component></template>export default { name: 'ExampleComponent'}可能遇到的问题控制台警告[Vue warn]: Extraneous non-emits ev.

有一个reactive对象，在清空这个对象时，直接给其赋{}不起作用。为了解决这个问题，采取了一点粗糙的方法，代码如下：<template> <el-button @click="clear">清空</el-button></template>setup() { const form = reactive({ name: 'Name', age: 18 }) const clear = () => { .

在开发过程，遇到了滚动条块的高度需要根据窗口变化而变化的需求，下面我们用elment plus中的el-scrollbar来实现这个需求还是直接上代码。<template> <el-scrollbar :style="{ height: `${scollHeight}px` }"></el-scrollbar></template>setup() { const getScollHeight = () => { // 根据自.

在使用watch监听props中的数据时，发现捕获不到值的变化我们直接上正确使用的代码。props: { target: { type: String, default: '' }},setup(props) { watch( () => props.target, (newVal, oldVal) => { // 逻辑代码 } )}...

由于没有仔细阅读vue3.0的官方文档，在给ref()变量赋值的时候遇到了问题众所周知，vue3.0增加了ref()、reactive()语法糖。ref() 基础类型、数组reactive() 对象两者除了包裹的内容不同，在使用方法上也有一定的区别。<template> <div>{{ refData }}</div> <div>{{ reactiveData.data }}</div></template>.