vue基础 - 数据传递之 $attrs inheritAtt

解决的问题

简单的元素层次嵌套，可以不用 vuex进行数据管理

对象

• $arrts

所有向下传递的属性值

• inheritAttrs

本节点是否渲染所有属性值

代码

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <demo1 :val1="val1" :val2="val2"></demo1>
</div>

<script lang="javascript">

  var demo11 = {
    template: `<div>传递二层：{{val1}} {{val2}}</div>`,
    props: ['val1','val2'],
    // inheritAttrs: false
  }

  var demo1 = {
    template: `
      <div>
        传递一层：{{val1}}
        <demo11 v-bind="$attrs"></demo11>
      </div>
    `,
    props: ['val1'],
    inheritAttrs: false,
    components:{
      demo11
    },
    created () {
      console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
    }
  }

  var app = new Vue({
    el: '#app',
    components:{
      demo1
    },
    data: {
      val1: 'val1',
      val2: 'val2'
    }
  })

</script>