2、Vue3.x 项目工程环境搭建中遇到的问题记录

2021-06-22 本文已影响0人天策上将记录学习的地方

一、vue3.x element-plus 表单遇到ref响应式丢失了的问题

image.png

二、el-input等ref绑定dom使用

1、

dom设置ref.png
2、

声明ref.png
3、

使用.png
4、

setup中别忘记return.png
三、Vue3.0，组件不加载进来，提示Failed to resolve component

尽量使用kebab-case.png
四、移除了$listeners，并且不兼容

2.x.png

3.x.png

五、require is not defined

 import.meta.glob('./api/*.js')

六、el-dialog不显示问题

3.x的el-dialog.png

2.x的el-dialog.png

七、实现Vue.2.x里面的$emit功能

// 数组语法

app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})
// 在setup中使用
setup(props, ctx) {
  const handleSetLineChartData = (type) => {
    ctx.emit('handleSetLineChartData', type)
  }
  return {
    handleSetLineChartData
  }
}

顺便提一句.png

八、TypeError: Cannot read property 'component' of null

:is没有绑定真实的值

九、如图：使用component动态组件时，只有组件名，而并未渲染

<component :is="currentComponent" />

问题九.png
解决方法：
确保引入的components组件名与currentComponent的值对应且一致，包括大小写。

十、echart的引用问题

// echarts5.0以前的版本
import echarts from 'echarts'

// echarts5.0
import * as echarts from 'echarts'

十一、监听props属性

watch(
  () => props.chartData,
  (val) => {
    initChart(val)
  }
)

十二、过滤器不生效

vue3.x过滤器已删除.png

十三、使用computed返回的值要用.value

十四、其他小知识

1、filter

Vue3移除了filter

2、this不能在setup使用的问题

获取组件实例方法getCurrentInstance()
这个方法可以获取到当前组件的实例，相当于Vue2中的this。

3、$el

Vue2使用$el --> this.$el.getBoundingClientRect()
Vue3使用$el --> const { ctx } = getCurrentInstance()
ctx.$el.getBoundingClientRect()

4、v-model

非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：

prop：value -> modelValue；

event：input -> update:modelValue；

非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；

新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定；

新增：现在可以自定义 v-model 修饰符。