vue3.0 透传 Attribute

效果一（子组件只有一个根节点，透传生效）

效果二（子组件有多个根节点，透传未生效，且控制台会抛出警告）

效果三（子节点如果不是单根节点的时候，可以通过添加:="$attrs"属性进行透传）

效果四（子节点是单根节点，但是不希望进行透传，inheritAttrs设置为false即不接收属性的透传）

透传是vue中一种特性，“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

透传特性：

透传的属性只会直接传给单根节点的组件，如果子组件有多个根节点，透传属性不会生效且控制台会抛出警告
透传过去的属性ID获取需要在dom节点加载结束进行，否则获取不到
透传属性命名和子组件上的重复，属性值不会生效

效果一（子组件只有一个根节点，透传生效）

子组件 son.vue

<template><button class="btn-style">btn</button>
</template>

父组件 home.vue

<template><son class="home-style"/>
</template><script>
import sonfrom '@/components/son.vue'export default {name: 'HomeView',components: {son}
}
</script>

结果：

<button class="btn-style home-style">btn</button>

效果二（子组件有多个根节点，透传未生效，且控制台会抛出警告）

子组件 son.vue

<template><button class="btn-style">btn1</button><button class="btn-style">btn2</button>
</template>

父组件 home.vue

<template><son class="home-style"/>
</template><script>
import sonfrom '@/components/son.vue'export default {name: 'HomeView',components: {son}
}
</script>

结果：

<button class="btn-style">btn</button>

<button class="btn-style">btn</button>

效果三（子节点如果不是单根节点的时候，可以通过添加:="$attrs"属性进行透传）

子组件 son.vue

<template><button class="btn-style">btn1</button><button class="btn-style" :="$attrs">btn2</button>
</template>

父组件 home.vue

<template><son class="home-style"/>
</template><script>
import sonfrom '@/components/son.vue'export default {name: 'HomeView',components: {son}
}
</script>

结果：

<button class="btn-style">btn1</button>

<button class="btn-style home-style">btn2</button>

效果四（子节点是单根节点，但是不希望进行透传，inheritAttrs设置为false即不接收属性的透传）

子组件 son.vue

<template><button class="btn-style">btn</button>
</template><script>
export default {inheritAttrs: false,
};
</script>

父组件 home.vue

<template><son class="home-style"/>
</template><script>
import sonfrom '@/components/son.vue'export default {name: 'HomeView',components: {son}
}
</script>

结果：

<button class="btn-style">btn</button>

vue3.0 透传 Attribute相关推荐

android 蓝牙透传,蓝牙4.0透传模块
特点: 1.这个过程数据不用处理 2.不会丢数据 3.双向传输 4.透传的数据包没有协议封装,自己可以控制数据包的大小 5.无需了解复杂的蓝牙底层协议,只要简单几步设置就可以实现蓝牙透传基本参数: ...
vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
1.父组件 <template><div class="Parent" ref="Parent"><el-button @clic ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
【从0到1搭建LoRa物联网】19、LoRa串口透传例程（补充）
系列文章: [从0到1搭建LoRa物联网]1.LoRa物联网的架构 [从0到1搭建LoRa物联网]2.终端设备开发方式 [从0到1搭建LoRa物联网]3.国产LoRa终端ASR6505软硬件 [从0到 ...
物联网平台TZ-IOT发布透传云内测服务：V1.0
物联网平台TZ-IOT发布透传云内测服务:V1.0 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 物联网简介: 什么是物联网?顾名思义,物联网是万物互 ...
ESP8266/8285/32 系列透传固件 JFirmwareESP v3.5.0 发布（重大更新）
ESP8266/8285/32 系列透传固件 JFirmwareESP v3.5.0 各种介绍及截图已打包在zip内,自行解压查看即可. 下载地址: CSDN:https://download.csd ...
信驰达BLE 5.0低功耗蓝牙模块使用（AT指令串口透传） RSBRS02ABR
信驰达蓝牙模组信驰达透传固件功能特点: 使用简单,无需任何蓝牙协议栈应用经验:支持蓝牙 5.0 协议栈. 价格便宜,价格便宜,价格便宜 (重要的事情只说三遍) 信驰达科技[Vivi] 联系电话:13 ...
CC2541蓝牙BLE4.0主从透传工程
.前言小弟初来乍到,这是小弟的第一篇博客,暂时还在上学,没有什么工作经验,本篇博客主要记录我在这几天学习BLE协议协议栈的一点心得体会,并用一个主从透传的实验来记录过程,如有错误之处,还望各位大佬多 ...
el-select change事件传多个参数_第8天 | 14天搞定Vue3.0，事件处理(详细)
在JavaScript语言中,当用户与UI组件交互时,UI组件能够激发一个相应事件.例如,用户按动按钮.滚动文本.移动鼠标或按下按键等,都将产生一个相应的事件. Vue3.0使用v-on指令(缩写为@ ...

vue3.0 透传 Attribute

效果一（子组件只有一个根节点，透传生效）

效果二（子组件有多个根节点，透传未生效，且控制台会抛出警告）

效果三（子节点如果不是单根节点的时候，可以通过添加:="$attrs"属性进行透传）

效果四（子节点是单根节点，但是不希望进行透传，inheritAttrs设置为false即不接收属性的透传）

vue3.0 透传 Attribute相关推荐

最新文章

热门文章