不常见的Vue 组件间通信方式

59 阅读1分钟

"$attrs"

1.什么是非Prop的Attribute?

  • 当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为非Prop的Attribute;常见的包括class、style、id属性等;

2.Attribute继承

  • 当组件有单个根节点时,非Prop的Attribute将自动添加到根节点的Attribute中;

2.1禁用Attribute继承

  • 如果不希望组件的根元素继承attribute,可以在组件中设置 inheritAttrs: false;
  • 禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素
  • 我们可以通过 $attrs来访问所有的 非props的attribute;
  <div>
    子组件
    <h1 :class="$attrs.class"></h1>
  </div>

2.2多个根节点的attribute

多个根节点的attribute如果没有显示的绑定,那么会报警告,我们必须手动的指定要绑定到哪一个属性上:

"$listeners"

  • 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过v-on="$listeners"传入组件内部。