vue $attrs与$listeners

[PaulChess]

1. vm.$attrs

• 2.4.0新增
• 类型 { [key: string]: string }
• 只读
• 详细: 包含了所有父组件在子组件上设置的属性(除prop传递的属性、class和style)

父组件:

<div id="app">
     <base-input
        label="姓名"
        class="name-input"
        placeholder="请输入姓名"
        test-attrs="$attrs">
    </base-input>
 </div>

子组件:

Vue.component("base-input", {
      inheritAttrs: true, //此处设置禁用继承特性
      props: ["label"],
      template: `
         <label>
          {{label}}-
          {{$attrs.placeholder}}-
          <input v-bind="$attrs"/>
        </label>`,
      mounted: function() {
        console.log(this.$attrs);
      }
 });

在子组件里面打印$attrs得到的是: placeholder和test-attrs两个属性。 子组件里面通过v-bind="$attrs"传给了input框，把上面两个属性挂到了input框上，可以得到:

inheritAttrs

• 2.4.0新增
• 类型 boolean
• 默认值 true
• 详细 默认情况下: 父作用域的不被认作props的特性绑定将会回退且作为普通的HTML特性应用在子组件的根元素上。通过设置inheritAttrs为false, 可以取消此默认行为。通过$attrs可以让这些特性生效且可以通过v-bind显性地绑定到非根元素上 注意: 和$attrs拿到的值不同，这个选项不影响class和style绑定

3. $listeners

• 2.4.0新增
• 类型 { [key: string]: Function | Array<Function> }
• 只读
• 详细 包含父作用域中(不含.native修饰器的)v-on事件监听器。它可以通过v-on:listeners传入内部组件。它是一个对象，里面包含了所有作用在这个组件上的监听器，可以通过v-on="$listeners"将事件监听指向这个组件内的子元素(包括内部的子组件)。

demo: 父组件:

<div id="app">
      <child1
        :p-child1="child1"
        :p-child2="child2"
        :p-child-attrs="1231"
        v-on:test1="onTest1"
        v-on:test2="onTest2">
      </child1>
  </div>

const app = new Vue({
        el: "#app",
        data: {
          child1: "pChild1的值",
          child2: "pChild2的值"
        },
        methods: {
          onTest1() {
            console.log("test1 running...");
          },
         onTest2(value) {
            console.log("test2 running..." + value);
          }
        }
    });

子组件1:

Vue.component("Child1", {
        inheritAttrs: true,
        props: ["pChild1"],
        template: `
          <div class="child-1">
            <p>in child1:</p>
            <p>props: {{pChild1}}</p>
            <p>$attrs: {{this.$attrs}}</p>
            <hr>
            <child2 v-bind="$attrs" v-on="$listeners"></child2>
          </div>`,
        mounted: function() {
          this.$emit("test1");
        }
    });

子组件2:

Vue.component("Child2", {
        inheritAttrs: true,
        props: ["pChild2"],
        template: `
          <div class="child-2">
            <p>in child->child2:</p>
            <p>props: {{pChild2}}</p>
            <p>$attrs: {{this.$attrs}}</p>
            <button @click="$emit('test2','按钮点击')">触发事件</button>
            <hr> 
          </div>`,
        mounted: function() {
           this.$emit("test2");
         }
  });

上例中，父组件在child1组件中设置两个监听事件test1和test2,分别在child1组件和child1组件内部的child2组件中执行。还设置了三个属性p-child1、p-child2、p-child-attrs。其中p-child1、p-child2被对应的组件的prop识别。所以： p-child1组件中$attrs为{ "p-child2": "pChild2的值", "p-child-attrs": 1231 }; p-child2组件中$attrs为{ "p-child-attrs": 1231 }。