zoukankan      html  css  js  c++  java
  • vue组件的inheritAttrs属性

    vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false

    可能不是很好理解,我们可以举个例子来验证一下。

    父组件 parent-component.vue

    <template>
     <div class="parent">
        <child-component aaa="1111"></child-component>
      </div>
    </template>
    <script>
    import ChildComponent from './child-component'
    export default {
      components: {
        ChildComponent
      }
    }
    </script>

    子组件 child-component.vue  设置 inheritAttrs: true(默认)

    <template>
      <div class="child">子组件</div>
    </template>
    <script>
    export default {
      inheritAttrs: true,
      mounted() {
        console.log('this.$attrs', this.$attrs)
      }
    }
    </script>

    最后渲染的结果:

    Elements

    Console

     子组件 child-component.vue  设置 inheritAttrs: false

    <template>
      <div class="child">子组件</div>
    </template>
    <script>
    export default {
    inheritAttrs: fasle, mounted() { console.log(
    'this.$attrs', this.$attrs) } } </script>

    最后渲染的结果:

    Elements

    Console

    总结:

    由上述例子可以看出,前提:子组件的props中未注册父组件传递过来的属性。

    1.当设置inheritAttrs: true(默认)时,子组件的顶层标签元素中(本例子的div元素)会渲染出父组件传递过来的属性(本例子的aaa="1111")。

    2.当设置inheritAttrs: false时,子组件的顶层标签元素中(本例子的div元素)不会渲染出父组件传递过来的属性(本例子的aaa="1111")。

    3.不管inheritAttrs为true或者false,子组件中都能通过$attrs属性获取到父组件中传递过来的属性。

  • 相关阅读:
    jzoj3294. 【SHTSC2013】超级跳马
    jzoj3243. Cube
    jzoj3242. Spacing
    jzoj3232. 【佛山市选2013】排列
    jzoj3297. 【SDOI2013】逃考
    jzoj4800. 【GDOI2017模拟9.24】周末晚会
    学习burnside、polya小结
    学习splay或spaly小结
    一个初学者的辛酸路程-了解Python-2
    一个初学者的辛酸路程-初识Python-1
  • 原文地址:https://www.cnblogs.com/luyuefeng/p/11106172.html
Copyright © 2011-2022 走看看