vue中$attrs的用法

官方文档说明:

vue中$attrs的用法

解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通过$attrs接受,且只包含父组件没有在props里声明的值。

父组件

<template>
  <div class="home">
    <child gender="male" age="18"/>
  </div>
</template>

<script>
import Child from '../components/Child'

export default {
  name: 'home',
  components: {
    Child,
  }
</script>

子组件

<template>
  <div>
     -----------------Child------------------
     <br>
     <span>gender: {{$attrs['gender']}}</span>
     <br>
     <span>age: {{$attrs['age']}}</span>
     <br>
  </div>
</template>

<script>
export default {
    name: 'Child'
}
</script>

<style>

</style>

结果图:

vue中$attrs的用法

上一篇:Vue3 补充:\$attrs和\$listeners属性


下一篇:XmlIgnore的解释和使用