首页 > 其他分享 >vue3透传 Attributes

vue3透传 Attributes

时间:2023-06-27 11:36:00浏览次数:42  
标签:ComponentB color attribute 透传 vue3 组件 Attributes

image-20220827172052064

“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyle 和 id

当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上

A组件:

<template>
  <h3>ComponentA</h3>
  <ComponentB class="component-b" />
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
  components: {
    ComponentB
   }
}
</script>

B组件

<template>
  <h3>ComponentB</h3>
</template>
<style>
.component-b{
  color: red;
}
</style>

禁用 Attributes 继承

<template>
  <h3>ComponentB</h3>
</template>
<script>
export default {
  inheritAttrs:false
}
</script>
<style>
.component-b{
  color: red;
}
</style>

 

标签:ComponentB,color,attribute,透传,vue3,组件,Attributes
From: https://www.cnblogs.com/junjuna/p/17508226.html

相关文章

  • vue3引入bootstrap5的折叠菜单无效问题解决
    问题:通过npm后者yarn安装bootstrap5后,在入口文件全局引入bootstrap5的js、scc,在vue组件引入折叠功能,点击可以正常展开,在点击无法收回解决办法:可参考网上博主的建议,大概意思就是之前引入的js文件不对,导致收回方法没有执行import'bootstrap/dist/js/bootstrap.bundle'main入口......
  • 【Vue3】Vue3中常用的组件传参方式
    props/$emit父传子(自定义属性props)//父组件代码<Son:name="test"/>//子组件代码<div>{{name}}</div>props:{name:{type:String,default:"default",},}子传父(自定义this.$emit)//子组件代码<button@click=&qu......
  • 【Vue】Vue3+Vite 实现 SVG 组件自动加载 icons 目录下所有文件
    1.安装依赖插件vite-plugin-svg-iconsvite-plugin-svg-icons用于生成svg雪碧图。特点:1.预加载在项目运行时就生成所有图标,只需操作一次dom2.高性能内置缓存,仅当文件被修改时才会重新生成vite-plugin-svg-icons官方文档pnpmaddvite-plugin-svg-icons2.安装......
  • vue3.0之axios使用
    //导入包importaxiosfrom"axios";//使用示例axios.post('发送请求地址',{携带变量key1:变量value1,携带变量key2:变量value2,}).then(response=>{//后端返回给前端的数据都在response.data里,可以通过“response.data.键”进行调用if(response.data.cod......
  • vue3.0之emit的使用
    主要用于跨组件传输数据,emit可以调用父组件中的自定义函数。使用方法letemit=defineEmits(['父组件自定义函数1','父组件自定义函数2','...'])//调用父组件自定义函数的执行emit('父组件自定义函数')主要逻辑在父组件中定义一个自定义函数<template><Loginv-if......
  • vue3.0之cookies的操作
    安装npminstallvue-cookiesimportVueCookiesfrom'vue-cookies'constcookies=VueCookiescookies.set('key值','字符串或变量','7d')//7d代表时间,存放7天cookies.get('key值')//取出key值对应的数据cookies.remove('ke......
  • VUE3学习笔记
    VUE3出现已经很长时间了,由于工作比较忙,项目比较紧,现在才看,已经晚于很多人了。这是vue3学习笔记,边学边写。1,项目创建可以使用git下载:winptyvue.cmdcreatehello-world使用之后会让你选择vue2还是3可以直接node创建:vuecreatedemo2,组件传值多了个类型校验,传值......
  • VUE3中实现“收起”“展开”功能
    《好记性不如烂笔头系列》<template><van-row><divclass="roadshowDescValueDiv"><divref="desContent"class="desContent":class="{'show-all':desShowAll}">......
  • 基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案
    前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起,页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。如上图:支持h5+小程序+App端markdown解析渲染。上面则是演示了在App端+小程序端键盘弹......
  • vue3 虚拟滚动的一些实践
    看到这个vueuse库打开新天地后,看到一句warning:Considerusing vue-virtual-scroller instead,ifyouarelookingformorefeatures.于是用起来。好用,前提是看懂文档业务需要使用grid,它的grid竟然不是css,而是js计算//tempalte<RecycleScroller:ref="(el)......