vue2.4新增 - $attrs & $listeners & inheritAttrs

$attrs

• 只读属性
• 包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)
• 可以通过v-bind="$attrs"传入内部组件

包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)

父组件

<template>
  <div>
    // 子组件上绑定了三个值 - happy、peter、attrs
    <child :happy="happy" :peter="peter" **attrs="$attrs"**></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'TestPage',
  data(){
    return {
      happy: 'happy',
      peter: 'peter'
    }
  },
  
  components: {
    child
  }
}
</script>

子组件

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: 'child',
  // 只将happy作为prop获取
  props: ['happy'],
  inheritAttrs: false,
  mounted(){
    console.log(this.$attrs) // {attrs: "$attrs", peter: "peter"}
  },
 };
</script>

可以通过v-bind="$attrs"传入内部组件

例：向孙子组件传值

父组件

<template>
  <div>
    // 子组件上绑定了三个值 - happy、peter、attrs
    <child :happy="happy" :peter="peter" attrs="$attrs"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'TestPage',
  data(){
    return {
      happy: 'happy',
      peter: 'peter'
    }
  },
  components: {
    child
  }
}
</script>

子组件

<template>
  <div>
    <child-child **v-bind="$attrs"**></child-child>
  </div>
</template>

<script>
import childChild from './childChild.vue'
export default {
  name: 'child',
  props: ['happy'],
  inheritAttrs: false,
  components: {
    childChild
  }
 };
</script>

孙子组件

<template>
  <div>
    <div>peter：{{peter}}</div>
  </div>
</template>

<script>
export default {
  name: 'childChild',
  // 子组件v-bind="$attrs"后，孙子组件可以直接 props: ['peter']
  // props只能获取$attrs中存在的值，如获取 happy，输出为undefined
  props: ['peter'],
  inheritAttrs: false,
  mounted(){
    console.log(this.peter) // peter
  }
 };
</script>

$listeners

• 只读属性
• 包含了父作用域中（不含.native修饰器的）v-on时间监听器
• 可以通过 v-on="$listeners" 传入内部组件

包含了父作用域中（不含.native修饰器的）v-on时间监听器

父组件

<template>
  <div>
    <child @editFather="editFather" @click="testListeners" @testNative.native="testNative"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'TestPage',
  components: {
    child
  },
  methods: {
    editFather(){},
    testListeners(){},
    testNative(){}
  }
}
</script>

子组件

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: 'child',
  inheritAttrs: false,
  mounted(){
    console.log(this.$listeners) // { editFather: f, click: f }
  }
 };
</script>

可以通过 v-on="$listeners" 传入内部组件

例：孙子组件修改父组件的值

父组件

<template>
  <div>
    <child :peter="peter" attrs="$attrs" @editFather="editFather"></child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'TestPage',
  data(){
    return {
      peter: 'peter'
    }
  },
  components: {
    child
  },
  methods: {
    editFather(){
      this.peter = 'hello, peter'
    }
  }
}
</script>

子组件

<template>
  <div>
    <child-child v-bind="$attrs" v-on="$listeners"></child-child>
  </div>
</template>

<script>
import childChild from './childChild.vue'
export default {
  name: 'child',
  props: [],
  inheritAttrs: false,
  components: {
    childChild
  }
 };
</script>

孙子组件

<template>
  <div>
    <div>peter： {{peter}}</div>
    <button @click="editFather">改变peter</button>
  </div>
</template>

<script>
export default {
  name: 'childChild',
  props: ['peter'],
  inheritAttrs: false,
  methods: {
    editFather(){
      // 孙子组件调用父组件的方法
      this.$emit("editFather")
    }
  }
 };
</script>

inheritAttrs

• boolean类型
• 默认值：true
• true：父作用域不作为 props 被识别 (且获取) 的特性将会被“回退”且作为普通的HTML特性应用在子组件的根元素上。
• false：去掉默认行为
• 该属性不影响class\style
• 该属性不影响$attrs，无论设置为true或false，子组件都可以通过$attrs获取到父组件传过来的属性值

inheritAttrs: true

inheritAttrs: false