记录vue3使用element 正确使用方法

记录vue3使用element 正确使用方法

命令

npm install --save element-plus

 

切记注意vue3 引入的是element plus

注意引入的element plus 样式的路径 现在已经没有lib 这个目录了,导致现在很多人都是错的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 3 中,遇到 "Cannot read properties of null (reading 'parentNode')" 这样的错误通常是由于尝试访问一个null或未定义的对象的父节点。这可能发生在以下几个情况: 1. **组件实例没有挂载**:如果在数据初始化之前尝试访问元素,可能会导致这个错误。确保你在引用DOM元素前,该元素已经被Vue实例正确地挂载到页面上。 ```javascript export default { mounted() { this.myElement = document.querySelector('#my-element'); // 在这里处理元素 } }; ``` 2. **条件渲染中的无效路径**:检查你的模板中是否在v-if或v-show指令下访问了未被渲染的节点。 ```html <div v-if="showElement" @click="handleClick">...</div> // 如果showElement一开始为false并且没有改变过,会报错 ``` 修复方法是确保`showElement`在初始时是可判定的(非null)。 3. **回调函数中的错误**:在事件监听器或其他异步操作中,确保你的回调函数里处理的是已存在的元素。 ```javascript this.$nextTick(() => { if (this.myElement) { this.myElement.parentNode.removeChild(this.myElement); } }); ``` 4. **销毁后的元素**:如果你尝试在组件卸载后继续访问其元素,也会得到这个错误。在适当的地方移除对已销毁组件的引用。 为了解决这个问题,你需要根据具体的上下文定位并修复代码中的潜在空对象引用。针对每个场景分别检查,并使用 `?.` 或者 `|| null` 来安全地访问属性,防止null异常。同时记得添加适当的错误处理和日志记录,以便更好地追踪问题。如需更多帮助,请提供具体代码片段以供分析。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值