vue组件的inheritAttrs属性

vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false

可能不是很好理解,我们可以举个例子来验证一下。

父组件 parent-component.vue

<template>

 <div class="parent">

<child-component aaa="1111"></child-component>

</div>

</template>

<script>

import ChildComponent from ‘./child-component‘

export default {

components: {

ChildComponent

}

}

</script>

子组件 child-component.vue  设置 inheritAttrs: true(默认)

<template>
  <div class="child">子组件</div>
</template>
<script>
export default {
  inheritAttrs: true,
  mounted() {
    console.log(‘this.$attrs‘, this.$attrs)
  }
}
</script>

最后渲染的结果:

Elements

Console

子组件 child-component.vue  设置 inheritAttrs: false

<template>
  <div class="child">子组件</div>
</template>
<script>
export default {  inheritAttrs: fasle,
  mounted() {
    console.log(‘this.$attrs‘, this.$attrs)
  }
}
</script>

最后渲染的结果:

Elements

Console

总结:

由上述例子可以看出,前提:子组件的props中未注册父组件传递过来的属性。

1.当设置inheritAttrs: true(默认)时,子组件的顶层标签元素中(本例子的div元素)会渲染出父组件传递过来的属性(本例子的aaa="1111")。

2.当设置inheritAttrs: false时,子组件的顶层标签元素中(本例子的div元素)不会渲染出父组件传递过来的属性(本例子的aaa="1111")。

3.不管inheritAttrs为true或者false,子组件中都能通过$attrs属性获取到父组件中传递过来的属性。

原文地址:https://www.cnblogs.com/luyuefeng/p/11106172.html

时间: 2024-11-02 22:17:48

vue组件的inheritAttrs属性的相关文章

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

vue组件讲解(is属性的用法)

什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次上,组件就是自定义元素,Vue.js的编辑器为它添加特殊功能.在有些情况下,组件也可以是原生元素的形式,以is特性进行扩展. 怎么使用组件? 说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢? 首先,我们要进行注册,才能进行使用 注册 之前我们也说过,可以通过new来创建一个VUE实例 n

vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件)

表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单指令</title> </head> <body> <div id="app"> <form action=""> <!--属性指令:v-model=

[Vue]组件——将控件的原生事件绑定到组件

1.方法1:.native修饰符 1.1.native修饰符:将原生事件绑定到组件的根元素上 <base-input v-on:focus.native="onFocus"></base-input> 1.2缺点: 如以下根元素实际上是一个 <label> 元素时,原生事件不能被绑定到input事件上: <label> {{ label }} <input v-bind="$attrs" v-bind:value

vue组件间通信六种方式(完整版)

vue组件间通信六种方式(完整版) 前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props.$emit/$on.vuex.$parent / $chil

vue组件中的通信

一.组件间的关系 1.父子关系 2.兄弟关系 3.隔代关系 二.组件间的通信方式 1.props 2.$emit/$on 3.VUEX 4.$parent/$children 5.$attrs/$listeners 6.provide/inject 三.通信方式举例 新建了一个过程,采用webpack来管理项目.  方法一:props / $emit 1.props---父组件向子组件传值 子组件:sub1.vue 父组件:app.vue 父组件通过props向下传递给子组件.注:组件中的数据共

vue组件化开发实战 - 实现简易ElementUI的Form表单组件

Input 组件 功能: 进行数据双绑 通知FormItem组件校验 <template> <div> <input :type="type" :value="value" @input="onInput" v-bind="$attrs" > </div> </template> <script> export default { inheritAttrs