vue中使用$attr搭配inheritAttrs隔层传递属性

除了vuex，还可以使用$attr来实现给子组件隔层传递属性

总结

• 使用**this.$attrs可获取到父组件传递给子组件但没在子组件props中**的属性
  • 缺点：组件内未被props注册的属性将作为普通html元素属性被渲染，这样做会使组件预期功能变得模糊不清。
  • 重点解决方法：在**子组件定义中添加inheritAttrs：false**，组件将不会把未被注册的props呈现为普通的HTML属性
• $attrs的传递：父组件传递给子组件的$attrs还可以通过 v-bind="$attrs" 继续传递给 孙子组件，此时传递的值是子组件的$attrs除了子组件中props声明过的元素

例子

• 摘自简书

父子组件

<template>
  <div class="home">
    <mytest  :title="title" :massgae="massgae"></mytest>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      title:'title1111',
      massgae:'message111'
    }
  },
  components:{
    'mytest':{
      template:`<div>这是个h1标题{{title}}</div>`,
      props:['title'],
      inheritAttrs: false, // 注意
      data(){
        return{
          mag:'111'
        }
      },
      created:function(){
        console.log(this.$attrs)// 注意，这里获取到的是{massgae:'message111'}
      }
    }
  }
}
</script>

孙子组件

• 父组件传递给子组件的$attrs还可以通过v-bind="$attrs"继续传递给孙子组件
• 孙子组件grandcom里获取到this.$attrs的值是子组件的$attrs除了子组件中props声明过的元素！

  <template>
      <div style="padding:50px;">
          <childcom :name="name" :age="age" :sex="sex"></childcom>
      </div>
  </template>
  <script>
  export default {
      'name':'test',
      props:[],
      data(){
          return {
              'name':'张三',
              'age':'30',
              'sex':'男'
          }
      },
      components:{
          'childcom':{
              template:`<div>
                  <div>{{name}}</div>
                  <grandcom v-bind="$attrs"></grandcom>
              </div>`,
              props:['name'],
              components: {
                  'grandcom':{
                      template:`<div>{{$attrs}}</div>`, // 注意：{'age':'30', 'sex':'男'}
                  }
              }
          }
      }
  }
  </script>