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

在vue3.x中，props是在setup外定义，以setup(props)的形式应用的，那么在vue3.2中该如何使用props呢？在vue3.2中，提供了一个defineProps语法糖用于定义props，先上例子。<script setup>import { onMounted } from 'vue'const props = defineProps({customStr: {

其实这个题目在vue的文档中已经了讲过了。想看官方文档的请点击：官方解决方案本文主要内容是结合element-plus中的el-table，给el-table-column中的元素设置ref，上例子。<script setup>import { ref, nextTick, onMounted } from 'vue'const columnRefs = []const setColu

在vue3.x中，注册局部自定义的指令是在setup方法外面，directives下面便可自定义指令，那在vue3.2中的<script setup>标签该如何自定义指令呢？其实，在vue3.2中，自定义指令变得更加的简单，直接上例子。<script setup>// 注册一个局部的自定义指令，需要以小写v开头const vFocus = {mounted(el) {//

在使用mitt的时候，off()后发现并未取消订阅，在阅读源码后发现，off()方法需要传入两个参数，一个是时间名，而另一个是订阅时的回调函数。我们直接上正确使用的代码。setup() {const bus = inject('bus')const callback = () => {// 逻辑代码}onMounted(() => {bus.on('mitt-name', callba

vue项目，在开发过程中需要设置环境变量，但是在env文件中设置了变量值，但是无效经查阅资料发现，vue项目的env变量需要加上“VUE_APP_”前缀。// 错误的设置方式BASE_API_PREFIX = '/api'// 正确的设置方式VUE_APP_BASE_API_PREFIX = '/api'...

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

在使用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>{{ reactiveD

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