vue设置标签名称_怎么在Vue的某个组件中根据组件tag标签名获取到对应的VueComponent实例呢...

最新推荐文章于 2023-08-14 15:07:09 发布
最新推荐文章于 2023-08-14 15:07:09 发布
阅读量2.2k 收藏
点赞数
文章标签： vue设置标签名称
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31451617/article/details/112038983
版权
在Vue中，如何根据组件的tag标签名快速获取到对应的VueComponent实例？文章探讨了在Vue中实现类似Omi框架的Omi.get功能，通过全局混入方法，创建`$_live_getChildComponent`，允许通过组件tag名获取子组件实例。
摘要由CSDN通过智能技术生成

1.以前玩omi框架的时候，有Omi.get方法来获取实例, ...好久没玩了,忘了。

反正很喜欢该方法。

2.如今想在vue里面怎么能够快速获取到对应组件标签名的的实例呢？

3.文档也看过,似乎脑海中没啥印象获取获取，除了ref或者vm.$children,这个只能获取到父子关系,或者爷孙...等关系,反正比较麻烦

4.那就全局注册个$_live_getChildComponent方法,每个实例便有了改方法。

5.使用 this.$_live_getChildComponent('vue实例', '组件tag名')

// 全局混入一些工具方法(根据自定义标签名(组件名)获取某个Vue实例的孩子组件),该方法会注册到每一个Vue实例上。

Vue.mixin({

created: function() {

let Type = (function() {

let Type = {};

for (let i = 0, type; type = ['Undefined', 'Null', 'Boolean', 'Number', 'String', 'Function', 'Array', 'Object'][i++]; ) {

(function(type) {

Type['is' + type] = function(obj) {

return Object.prototype.toString.call(obj) === '[object ' + type + ']';

};

})(type);

}

return Type;

})();

this.$_live_type = Type;

// use: this.$getChildComponent(vm, 'xx-xx')

this.$_live_getChildComponent = function(vueInstance, componentTag) {

let component = null;

let allComp = getAllChildComp(vueInstance);

let i = allComp.findIndex(function(vm) {

return vm.$options._componentTag === componentTag;

});

if (i !== -1) {

component = allComp[i];

}

return component;

function getAllChildComp(instance) {

let allComp = [], child;

if (Type.isObject(instance)) {

child = instance.$children;

} else if (Type.isArray(instance)) {

child = instance;

}

for (let i = 0; i < child.length; i++) {

allComp.push(child[i]);

if (child[i].$children.length > 0) { // 还有孩子

allComp = allComp.concat(getAllChildComp(child[i].$children))

};

}

return allComp;

}

};

}

});

注: 至于$_live_getChildComponent这他妈什么命名,其实我也不太喜欢,但是Evan You是这么说的,我也只好遵守了。

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

$_live_getChildComponent($_为前缀, live是我目前开发的项目名称, getChildComponent是该方法的意义名)

Angular04 组件动态地从外部接收值、在组件中使用组件

一.组件从外部接收值 1 修改组件的ts文件,让组件的属性可以从外部接收值 1.1 导入Input注解对象 1.2 在属性变量前面添加 @Input() 注解 1.3 去掉构造器中的属性变量赋值语句 ...

React组件中对子组件children进行加强

React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用

{this.props.children}< ...

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变 ...

Vue main&period;js 文件中全局组件注册部分

在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

react组件中刷新组件小技巧

在开发过程中,经常遇到组件数据无法更新,例如:当你用同一个表格展示不同数据的时候,当点击第5页后,再点击另外一份数据时发现还在第五页,并没有回到第一页. 怎么能让一个组件每次数据不一样时都重新加载呢, ...

vue 中父子组件传值：props和&dollar;emit

更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

VUE 父组件与子组件交互

1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

vue定义全局方法 调用其他组件的方法

官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

Vue props父组件向子组件传值详解

vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据 Prop是什么? Prop是你可以在组件上注册的一些自定义特性.当一个值传递给一个prop特性的时候 ...

随机推荐

django进阶

路由系统 简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户 ...

Linux学习内容

Linux学习要点(转载自红联) 一.学习Linux的基本要求1． 掌握至少50个以上的常用命令. 2． 熟悉Gnome/KDE等X-windows桌面环境操作 . 3． 掌握.tgz..rpm等软件 ...

异步SRAM控制器的Verilog建模

前言:sram顾名思义静态随机存储器,分为asram异步型和ssram同步型.这里驱动DE2上一块ISSI公司的512KB的asram. 设计思路:因为实际应用中单字节读写效率不高,所以本设计中仿照s ...

javascript生成n至m的随机整数

摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包 ...

yum服务器设置

转自:http://blog.chinaunix.net/uid-22141042-id-1789605.html 不得不说,RedHat的确很邪恶,如果我们直接用他自带的系统碟做YUM源的话,总是会 ...

ros和Android&lpar;一&rpar;

ros和Android :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { ...

Jenkins安装后无法安装插件

处理方法 Jenkins -- 管理插件 -- 高级 -- 升级站点 将URL 中的https 改为 http

用户场景分析i

名字 学生(注重饮食选择,挑剔) 年龄 20 收入 无 知识层面 大学 使用这个网站的典型场景 中午或者晚上饿了但是不知道想吃什么,又不想随便吃,还是比较挑剔..这时,他就需要通过我们的网站来看其他人 ...

lightgbm的sklearn接口和原生接口参数详细说明及调参指点

class lightgbm.LGBMClassifier(boosting_type='gbdt', num_leaves=31, max_depth=-1, learning_rate=0.1, ...

ajax请求格式

ajax请求格式........... var rowsData = $('#receiptPrintList').datagrid('getSelections'); $.ajax({ type: ...

rubyxr109
关注
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
鸭绒的博客
09-19 4万+
使用props进行父子组件通信时产生错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentIndex” 产生错误的原因：在子组件中，你试图修改父组.
vue单页应用中多标签头显示及组件缓存设计实例
02-17
在Vue中，当用户在页面间跳转时，如果每次都重新渲染组件，可能会导致不必要的计算和网络请求，降低应用响应速度。通过缓存不需改变的组件，可以避免重复渲染，从而加快页面切换速度。Vue Router 提供了 `keep-alive...
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..
qq_58062502的博客
02-06 5万+
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
Avoid mutating a prop directly since the value will be overwritten whenever the parent component
最新发布
m0_51583158的博客
08-14 3万+
在子组件需要改变父组件值的地方，通过 this.$emit("isPreview", true)通知父组件修改值。解释：避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。
报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent component
weixin_51173316的博客
11-30 2323
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "filterStatus" 这个报错的意思是子组件修改了父组件传来的值。 原因：父.
Avoid mutating a prop directly since the value will be overwritten whenever
TO_Web的博客
12-11 2069
在vue中,父组件向子组件传值, 并在子组件改变了父组件的值,就会发出警告 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态; 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 解决办法: 在子组件中再写个方法 把穿过来的值更新给父组件,父组件再接收这个值,然后
Vue.js添加组件操作示例
10-18
在Vue.js中，组件是一个可重用的Vue实例，有自己的模板、数据、方法等。通过注册和调用，我们可以将组件插入到应用的不同部分，从而实现代码的模块化和复用。 **组件的注册** Vue.js 提供两种组件注册方式：全局...
vue.js实现标签页切换效果
10-18
在具体实现上，首先需要在Vue实例的template中定义标签页的结构和样式。假设有三个标签页组件introduce（介绍）、chatbar（聊天栏）、videobar（视频栏），它们将随着按钮的切换显示或隐藏。在每个按钮上绑定点击...
vue中动态设置meta标签和title标签的方法
10-18
因此，我们需要在Vue中通过编程的方式动态地添加或修改meta标签。 首先，我们需要在路由配置中为每个路由定义特定的meta信息。例如，在vue-router中，可以这样设置： ```javascript const router = new VueRouter...
基于vue.js路由参数的实例讲解——简单易懂
10-19
此外，`<router-view>`组件在Vue实例中用于展示当前匹配到的路由对应的组件。 文章还提到了路由表中的默认路由设置，以及重定向路由的配置方法。默认路由可以配置一个默认的路径，当其他路由不匹配时使用。重定向...
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...
2024 做自己的太阳
07-03 7万+
author: jwensh date: 2021.06.29 文章目录1. 需求及报错2. 分析原因3、解决方案 1. 需求及报错 需求： 使用的场景是：A 组件中引用 B 组件，使用 v-model 给 B 传递参数，B 使用 props: { value } 接收内容，在 B 中根据逻辑直接修改并赋值 value， 事件触发后在浏览器 console 里看到报错，内容如下： Avoid mutating a prop directly since the value will be overwri.
Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
l960516的博客
08-14 4万+
错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bei...
VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案
热门推荐
yangwq的博客
01-05 15万+
VUE报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "topActive" 大概意思是：避免直接改变属性，因为每当父组件重新渲染
VUE报错__Avoid mutating a prop directly since the value will be overwritten whenever the parent
weixin_44085020的博客
10-04 2479
vue
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
qq_36697196的博客
07-24 4万+
单向数据流 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解 另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告 下面是一个典型例子 <div id="example"> <parent></parent> </div> <script> var
Avoid mutating a prop directly since the value will be overwritten whenever the parent component...
qq_43483403的博客
09-07 909
报错信息： 原因：在子组件中修改了父组件传过来的参数（props中的数据），这是不允许的 修改方式：事件传递（this.$emit），在父组件中修改
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值