正文

vue相邻自定义组件渲染错误正确的打开方式(代码片段)

sephiroth-wzc  sephiroth-wzc  2023-01-08  798

关键词：

话不多说看问题：

当封装自定义组件时例如（自定义下拉列表）两个相同的组件在多次v-if变化时偶尔会发生渲染错误，明明赋值正确但是组建中的ajax方法可能返回的数据乱掉，或者其他神逻辑错误。

技术分享图片

经过查询发现正确的做法，在官网中已经明示：

key

预期：number | string

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

最常见的用例是结合 v-for：
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
- 完整地触发组件的生命周期钩子
- 触发过渡
例如：
```
<transition>
  <span :key="text"> text </span>
</transition>
```
当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。

～～～～～～～～～

所以处理的方法就是给自定义组件增加 key 区分不同。

具体内容请参见 x乎答案

https://www.zhihu.com/question/61064119

js使用vue自定义组件实现动态多层数据渲染+递归+踩坑(代码片段)

...用打包软件(WebPack，VueCli）的原生环境下使用vue自定义组件文章目录组件名称规则全局组件和局部组件简单的递归Demo组件名称规则首先说一下组件名称规则，注册的组件名称用了大写的话在使用时则将大写改为-大写... 查看详情

js使用vue自定义组件实现动态多层数据渲染+递归+踩坑(代码片段)

vue的三种通信方式(代码片段)

...组件使用父组件数据渲染）a)在子组件中添加propsprops:[自定义prop名字]b)在子组件中把自定义prop当data使用即可c)找到父组件模板中的子组件标签，添加属性<子组件标签:自定义prop名字="父组件data中的数据"></子组件标签>&nb... 查看详情

js使用vue自定义组件实现动态多层数据渲染+递归+踩坑(代码片段)

为啥 Vue 渲染组件不正确？

】为啥Vue渲染组件不正确？【英文标题】：WhydoesVuerendercomponentincorrectly?为什么Vue渲染组件不正确？【发布时间】：2021-05-2808:22:33【问题描述】：以下是错误示例。重现问题：添加3项并删除第二项。里面的所有东西都被正确删除... 查看详情

Vue.js 组件未知的自定义元素

】Vue.js组件未知的自定义元素【英文标题】：Vue.jscomponentUnknowncustomelement【发布时间】：2018-12-2305:59:37【问题描述】：我在Laravel中使用Vuejs，我的组件正在渲染，但vuejs不断给我警告未知的自定义元素。您是否正确注册了组件？... 查看详情

[Vue 警告]：无法挂载组件：未定义模板或渲染函数。错误

】[Vue警告]：无法挂载组件：未定义模板或渲染函数。错误【英文标题】：[Vuewarn]:Failedtomountcomponent:templateorrenderfunctionnotdefined.Error【发布时间】：2017-10-2016:01:03【问题描述】：我正在尝试构建一个Vue应用程序，但我在控制台上收... 查看详情

react——withrouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件(代码片段)

withRouterimportRoute,Switch,withRouterfrom"react-router-dom"withRouter高阶组件增强组件——获取路由对象。withRouter让非路由直接匹配渲染的组件中能得在this.props中得到路由对象@withRouterclassAppextendsComponentrender()console.log(t 查看详情

vue入门基础——动态组件&插槽&自定义指令(代码片段)

本篇文章主要讲述的是动态组件&插槽&自定义指令一、动态组件1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏2、如何实现动态组件渲染Vue提供了一个内置的组件，专门用来实现动态组件的渲染。示例代... 查看详情

vue入门基础——动态组件&插槽&自定义指令(代码片段)

vue组件之间的五种传值方法(父子兄弟跨组件)(代码片段)

一、props/$emit父子组件传值：父传子(自定义属性props)父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上... 查看详情

带有自定义渲染器的jlist(代码片段)

...一个显示多个JPanel的JList，我创建了一个返回新JPanel的自定义渲染器。JPanels显示在JList中，但是它们无法访问，我无法选择它们，如果我有一个按钮或文本区域，我就无法按下它。我想尝试，如果这在JList中工作，因为我想做进... 查看详情

vue之父组件给子组件的传参的另类方式实现自定义弹窗组件(代码片段)

目录父组件向子组件传参自定义弹窗组件父组件向子组件传参详情查看：Vue之组件之间的传值通信（多种方法，简洁而不失重点）传统方式：通过属性props传参特殊方式：通过ref调用子组件方法，然后... 查看详情

vue详解vue组件系统目录(代码片段)

...要性：props不绑定的前提下,只能被作为字符串解析Vue的自定义事件自查看详情

Vue自定义输入文件组件无法正确提交

】Vue自定义输入文件组件无法正确提交【英文标题】：VueCustominputfilecomponentcouldnotbesubmittedcorrectly【发布时间】：2018-12-0322:19:53【问题描述】：我有一个用于浏览文件的组件，用于选择要上传的文件。这是我的组件：<template>&... 查看详情

[Vue 警告]：未知的自定义元素：... - 您是不是正确注册了组件？

】[Vue警告]：未知的自定义元素：...-您是不是正确注册了组件？【英文标题】：[Vuewarn]:Unknowncustomelement:...-didyouregisterthecomponentcorrectly?[Vue警告]：未知的自定义元素：...-您是否正确注册了组件？【发布时间】：2022-01-1817:24:43【问... 查看详情

打开masablazor的正确姿势5：插槽(代码片段)

...，一般将RenderFragment称为模板。一、插槽RenderFragment的定义和使用组件式开发模式，带来了复用、灵活、性能等优势，但也增加了组件之间数据传递的复杂度。组件之间数据传递的方式一般包括以下四种：①通过属性实现父传... 查看详情

[浅析]vue3.0中的自定义渲染器(代码片段)

Vue3.0中支持自定义渲染器(Renderer)：这个API可以用来自定义渲染逻辑。它可以将VirtualDOM渲染为Web平台的真实DOM。（在以往像weex和mpvue，需要通过fork源码的方式进行扩展）。1.自定义渲染器的原理渲染器是围绕VirtualD... 查看详情