美文网首页
vue基础 - 数据传递之 $attrs inheritAtt

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

作者: 会煮咖啡的猫咪 | 来源:发表于2018-03-12 16:41 被阅读45次

    解决的问题

    简单的元素层次嵌套,可以不用 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>
    

    相关文章

      网友评论

          本文标题:vue基础 - 数据传递之 $attrs inheritAtt

          本文链接:https://www.haomeiwen.com/subject/xgznfftx.html