[JavaScript知识库]关于vue新增 - $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
• 该属性不影响attr ， 无 论 设 置 为true或 false， 子 组 件 都 可 以 通 过 attrs，无论设置为true或false，子组件都可以通过attrs，无论设置为true或false，子组件都可以通过attrs获取到父组件传过来的属性值

inheritAttrs: true

// 父组件引用
<customEvent
  @click="testEvent" testAttr='testAttr_value' testAttr2='testAttr2' class="bushiba?"
  @myEvent="emitFN" ref="childtest"
>
</customEvent>
 
// 子组件 customEvent
<template>
  <div> 
    根节点这个 div 标签将继承非props的所有 attr 和 事件；
    (vue内置的特殊attribute是不会继承的)
 
    <div>单节点组件1</div>
    <div>单节点组件2</div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  inheritAttrs: true,
})
</script>

inheritAttrs: false

设置为false后，不论单节点还是多节点的组件，都不会继承任何 attr 和 事件！