• Vue 中 $attrs 的使用


    名词解释:

    $attrs--继承所有的父组件属性(除了prop传递的属性、class 和 style )

    inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

    主要用途

    用在父组件传递数据给子组件或者孙组件

    <body>

    <div id="app" class="demo">
    <base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component("base-input", {
    inheritAttrs: false, //此处设置禁用继承特性
    props: ["label"],
    template:
    '<label>' //这里的label元素 因为inheritAttrs: false,所以无法从<base-input>元素中继承placeholder, data-date-picker属性,但是class属性会继承
    +' {{label}}'
    +' {{$attrs.placeholder}}'
    +' {{$attrs["data-date-picker"]}}'
    +' <input v-bind="$attrs"/>'  //<base-input>元素中,除了class,label(proprs中已经有了)外,剩下placeholder  和 data-date-picker的属性以及属性值全部继承过来了
    +' </label>'
    ,
    mounted: function() {
    console.log(this.$attrs);
    }
    })
    const app = new Vue({
    el: '#app',
    data: {

    }

    });

    </script>

    </body>

    渲染出来的结果:

    <label class="username-input">
    姓名
    Enter your username
    activated
    <input placeholder="Enter your username" data-date-picker="activated">
    </label>

    如果把上面例子中的inheritAttrs: false去掉或者改为inheritAttrs: true,最终渲染为:

    <label placeholder="Enter your username" data-date-picker="activated" class="username-input">
    姓名
    Enter your username
    activated
    <input placeholder="Enter your username" data-date-picker="activated">
    </label>

  • 相关阅读:
    阅读笔记十四
    惨淡的蓝桥杯国赛经历
    阅读笔记十三
    阅读笔记十二
    阅读笔记十一
    阅读笔记十
    阅读笔记九
    阅读笔记八
    阅读笔记七
    阅读笔记六
  • 原文地址:https://www.cnblogs.com/wjx6270/p/11906034.html
Copyright © 2020-2023  润新知