父组件与子组件的属性透传

透传是vue中一种特性,官方的解释是:“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyleid。这句话解释过来就是一些不被prop定义的属性直接添加到子组件上的时候,子组件是可以获取到的,只不过获取的方式是通过方法获取的,下面我们展开说一下

规则 

父组件在使用子组件的时候,如何“透传属性和事件”给子组件呢?

透传属性和事件并没有在子组件中用props和emits声明
透传属性和事件最常见的如@click和class、id、style 
当子组件只有一个根元素时,透传属性和事件会自动添加到该根元素上;如果根元素已有class或style属性,它会自动合并                       

1、透传的属性只会直接传给单根节点的组件,如果子组件不是一个根节点,那么透传属性会直接失效,并且警告 

举列:

我有一个父组件App.vue

<template><div><!--在子组件中添加两个属性 id和class,如果子组件ChildModule只存在一个单根节点的元素,并且ChildModule中没有用props来接收id和class,那么这个di和class,就会传递给Navbar节点的根节点--><ChildModule id="box" class="aaa"></ChildModule></div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default{data(){},components:{ChildModule:ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule}
}
</script>

案列1:透传的属性只会直接传给单根节点的组件

子组件

<template><!-- 此组件只有一个div的根节点(注意:<template></template>不是节点,它不会显示在界面上的) --><!-- 所以从父组件传递过来的id,class,style就会被此根节点接收 --><div><button>提交</button></div>
</template>

查看F12元素可以体现

案列2:如果子组件不是一个根节点,那么透传属性会直接失效,并且警告

如果子组件存在两个根组件的情况下则透传会被失效

<template><!-- 注意:<template></template>不是节点,它不会显示在界面上的 --><!-- 因为子组件不是一个根节点,它有两个根节点d,透传属性会直接失效,并且警告 --><div> <!--根节点1--><button>提交</button></div><div> </div><!--根节点2-->
</template>

查看F12元素可以体现

 案列3:子组件中用props接收的属性传透属性会直接失效

<template><!-- 此组件只有一个div的根节点(注意:<template></template>不是节点,它不会显示在界面上的) --><!-- 因为script中用props接收了class属性,但是没接收id属性,所以id属性会被透传到此根节点 --><div> <!--根节点1--><button>提交</button></div>
</template>
<script>
export default{
props:["class"]}
</script>

查看F12元素可以体现

案列4:透传过去的属性如果和子组件上的命名或属性重复了,会会以子组件本身的属性为主或追加

透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主(id)
透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面(style,class)

<template><!-- 此组件只有一个div的根节点(注意:<template></template>不是节点,它不会显示在界面上的) --><!-- 透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主 --><!-- 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面 --><div id="wowo" class="bbb"><button>提交</button></div>
</template>

查看F12元素可以体现

2、透传事件

案列

父组件

<template><div><!--在子组件中添加两个属性 id和class,如果子组件ChildModule只存在一个单根节点的元素,并且ChildModule中没有用props来接收id和class,那么这个di和class,就会传递给Navbar节点的根节点--><ChildModule id="box" class="aaa" @click="handelClick()"></ChildModule></div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default{data(){},components:{ChildModule:ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule},methods:{handelClick(){console.log("1111")}}
}
</script>

 子组件

<template><!-- 注意:<template></template>不是节点,它不会显示在界面上的 --><!-- 因为子组件不是一个根节点,它有两个根节点d,透传属性会直接失效,并且警告 --><div> <!--根节点1--><button>提交</button></div>
</template>

点击提交的时候,会发现打印出了: 22222,说明,父组件的handelClick事件也传递给了子组件的根节点。子组件根节点也就有了这个绑定事件。(其规则也是与透传属性是一样的)

3、禁止透传

父组件

<template><div><!--在子组件中添加两个属性 id和class,如果子组件ChildModule只存在一个单根节点的元素,并且ChildModule中没有用props来接收id和class,那么这个di和class,就会传递给Navbar节点的根节点--><ChildModule id="box" class="aaa" @click="handelClick()"></ChildModule></div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {data() {return {}},components: {ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule},methods: {handelClick() {console.log("1111")}}
}
</script>

添加 inheritAttrs:false可以禁止透传

子组件

<template><!-- 此组件只有一个div的根节点(注意:<template></template>不是节点,它不会显示在界面上的) --><!-- 透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主 --><!-- 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面 --><div id="wowo" class="bbb" ><button>提交</button></div>
</template>
<script>
export default{//禁止透传:在子组件中添加inheritAttrs为false,则父组件的属性和事件不会被透传到子组件//虽然指定了 inheritAttrs:false 但是子组件仍然可以通过 v-bind="$attrs"来得到负组件透传过来的属性和事件inheritAttrs:false,
}
</script>

虽然指定了 inheritAttrs:false 但是子组件仍然可以通过 v-bind="$attrs"来得到父组件透传过来的属性和事件

子组件

<template><!-- 此组件只有一个div的根节点(注意:<template></template>不是节点,它不会显示在界面上的) --><!-- 透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主 --><!-- 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面 --><div id="wowo" class="bbb" ><button v-bind="$attrs">提交</button></div>
</template>
<script>
export default{//禁止透传:在子组件中添加inheritAttrs为false,则父组件的属性和事件不会被透传到子组件//虽然指定了 inheritAttrs:false 但是子组件仍然可以通过 v-bind="$attrs"来得到负组件透传过来的属性和事件inheritAttrs:false,
}
</script>

查看F12元素可以体现(点击button可以发现button已经绑定了handelClick事件,打印了1111)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/112963.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

django 支付宝支付

支付宝支付 1.注册开发者账号 调试支付宝支付需要先在支付宝开放平台进行组测&#xff0c;入驻为“自助研发者”&#xff0c;链接为支付宝开放平台 2.进入开发者工具中的沙箱 里面有所需的id 域名 3.RSA 加密算法

尚硅谷Flink(完)FlinkSQL

&#x1f9d9;FlinkSQL&#x1f3c2;&#x1f93a; Table API 和 SQL 是最上层的 API&#xff0c;在 Flink 中这两种 API 被集成在一起&#xff0c;SQL 执行的对象也是Flink 中的表&#xff08;Table&#xff09;&#xff0c;所以我们一般会认为它们是一体的。 SQL API 是基于…

短视频矩阵系统源头开发

一、智能剪辑、矩阵分发、无人直播、爆款文案于一体独立应用开发 抖去推----主要针对本地生活的----移动端(小程序软件系统&#xff0c;目前是全国源头独立开发)&#xff0c;开发功能大拆解分享&#xff0c;功能大拆解&#xff1a; 7大模型剪辑法&#xff08;数学阶乘&#x…

openHarmony UI开发

常用组件和布局方式 组件 ArkUI有丰富的内置组件&#xff0c;包括文本、按钮、图片、进度条、输入框、单选框、多选框等。和布局一样&#xff0c;我们也可以将基础组件组合起来&#xff0c;形成自定义组件。 按钮&#xff1a; Button(Ok, { type: ButtonType.Normal, stateEf…

C# Onnx Yolov8 Detect 烟雾检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Onnx…

用Python解析HTML页面

用Python解析HTML页面 文章目录 用Python解析HTML页面HTML 页面的结构XPath 解析CSS 选择器解析简单的总结 在前面的课程中&#xff0c;我们讲到了使用 request三方库获取网络资源&#xff0c;还介绍了一些前端的基础知识。接下来&#xff0c;我们继续探索如何解析 HTML 代码&…

leetcode做题笔记191. 位1的个数

编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中…

Python超入门(5)__迅速上手操作掌握Python

# 20.列表# 一维列表 names [Hash, Bob, Nick] print(names) # 全打印 print(names[:]) # 全打印 print(names[1:3]) # 打印1到2号索引 print(names[:2]) # 打印0到1号索引[Hash, Bob, Nick] [Hash, Bob, Nick] [Bob, Nick] [Hash, Bob]# 二维列表:一维列表中嵌套一维列表…

Module not found: Error: Can‘t resolve ‘core-js/modules/es.promise.js‘

1.遇到的问题 具体错误&#xff1a; ERROR in ./src/js/index.js 1:0-48 产环境配置15js兼容性处理srcjsERROR in ./src/js/index.js 2:0-39 Module not found: Error: Cant resolve core-js/modules/es.promise.js in D:DesktopMy FilesRecentlyStudyWebPackdemo3.webpack生…

R语言:因子分析 factor analysis

文章目录 因子分析数据集处理步骤主成分法做因子分析最大似然法做因子分析 因子分析 因子分析的用途与主成分分析类似&#xff0c;它也是一种降维方法。由于因子往往比主成分更易得到解释&#xff0c;故因子分析比主成分分析更容易成功&#xff0c;从而有更广泛的应用。 从方法…

华为OD 区间交集(200分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…

在 Python 中使用 Fsolve

本文将探讨如何使用 fsolve 在 Python 中求解。 我们还将探索它的使用场景和一些示例代码&#xff0c;以更好地理解如何以及何时使用它来达到某种结果。 让我们首先了解 fsolve 是什么以及为什么使用它。 Python 中的 fsolve 函数 方程是数据科学的根源&#xff0c;它们帮助数…

微前端二:qiankun

qiankun是基于Single-spa开发的框架&#xff0c;所以我们先来看下Single-spa是怎么做的&#xff1a; Single-spa 是最早的微前端框架&#xff0c;兼容多种前端技术栈&#xff0c;是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架&#xff1b; 优点&#xf…

数据结构原理与分析知识点

知识点 在数据结构中&#xff0c;从逻辑上可以把数据结构分为线性结构和非线性结构算法分析&#xff1a;时间复杂性和空间复杂性算法---解决问题的有限运算序列栈的操作原则是后进先出在长度为n的顺序表的第 i&#xff08;1≤i≤n 1&#xff09;个位置上插入一个元素&#xff…

APP应用开发sdk版本过低可能性原因问题排查及解决方案

同学们&#xff0c;在移动 app 开发中&#xff0c;提示sdk版本过低缺找不到原因的情况都知道的吧哈哈哈&#xff0c;这个我觉得我有必要全面的分析和排查&#xff0c;让同学们看完这个文章都得以解决。这是我的初衷奈何地主家里也没有余粮呀&#xff08;我也不能完全总结出来&a…

《动手学深度学习 Pytorch版》 8.7 通过时间反向传播

8.7.1 循环神经网络的梯度分析 本节主要探讨梯度相关问题&#xff0c;因此对模型及其表达式进行了简化&#xff0c;进行如下表示&#xff1a; h t f ( x t , h t − 1 , w h ) o t g ( h t , w o ) \begin{align} h_t&f(x_t,h_{t-1},w_h)\\ o_t&g(h_t,w_o) \end{ali…

用 Python 这样去创建词云不是更美嘛?

什么是词云&#xff1f;在网络上我们经常可以看到一张图片&#xff0c;上面有一大堆大小不一的文字&#xff0c;这便是词云。词云一般是根据输入的大量词语生成的&#xff0c;如果某个词语出现的次数越多&#xff0c;那么相应的大小就会越大。 Python 中有一个专门用来生成词云…

spring-cloud-starter-gateway踩坑

1.bean of type org.springframework.http.codec.ServerCodecConfigurer that could not be found. 需要将项目中用到的spring-boot-starter-web依赖给去掉 去掉以下的 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo…

智慧公厕:打造未来城市公共设施的智慧选择

随着信息技术的不断发展&#xff0c;城市公共设施需要实现个性化、高效化和智能化&#xff0c;其中包括公共厕所。智慧公厕是一种结合物联网、互联网、人工智能、云计算、大数据和传感感知等技术的新型公厕&#xff0c;旨在提高公共厕所管理效率、跨区域跨系统的联网管理、自动…

C# .Net6 指定WSDL, 生成Webservice,调用该接口服务

C# .Net6 指定WSDL, 调用该接口服务。 IDE&#xff1a; Microsoft Visual Studio Community 2022 (64 位)平台&#xff1a;.Net6协议&#xff1a;Soap协议 Xml格式 功能 需要开发一个前置机程序&#xff0c; 用于和硬件程序交互&#xff0c;已知条件是&#xff1a;嵌入式同事…