inheritAttrs和$attrs的理解

最新推荐文章于 2023-11-14 13:31:02 发布

M_zhangzhimiao

最新推荐文章于 2023-11-14 13:31:02 发布

阅读量271

点赞数

分类专栏： vue js 文章标签： vue inheritAttrs

本文链接：https://blog.csdn.net/qq_36464859/article/details/89249529

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

应用背景：为了更好的传递给后代组件一些属性名和属性值，但不希望所有的后代都继承这些属性名和属性值

inheritAttrs就是为了设置子组件是否继承这些属性名和属性值(style和class例外)

当inheritAttrs的值为true时，如下：

<body>
    <div id="app">
        <base-input required placeholder="Enter your username"></base-input>
    </div>
    <script>
        Vue.component('base-input', {
            inheritAttrs: true,
            template: `
                <label>
                    <input />
                </label>
            `
        })
        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

渲染出的子组件继承了父组件的属性:
继承属性
当inheritAttrs的值为false时，如下：

<body>
    <div id="app">
        <base-input required placeholder="Enter your username"></base-input>
    </div>
    <script>
        Vue.component('base-input', {
            inheritAttrs: false,
            template: `
                <label>
                    <input />
                </label>
            `
        })
        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

渲染出的子组件没有继承父组件的属性:
不继承属性

$attrs则是属性的传递，可以根据需要给子组件或者后代组件传递祖先的属性名和属性值，用法如下：

<body>
    <div id="app">
        <base-input required placeholder="Enter your username"></base-input>
    </div>
    <script>
    	//input中绑定了$attrs
        Vue.component('base-input', {
            inheritAttrs: false,
            template: `
            <div>
                <label>
                    <input
                        v-bind="$attrs"
                    />
                </label>
            </div>
            `
        })
        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

渲染结果为input表情继承了父组件的属性：
使用$attrs
如此，便实现了父组件向后代组件传递信息的过程。

M_zhangzhimiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
inheritAttrs和$attrs的理解

应用背景：为了更好的传递给后代组件一些属性名和属性值，但不希望所有的后代都继承这些属性名和属性值inheritAttrs就是为了设置子组件是否继承这些属性名和属性值(style和class例外)当inheritAttrs的值为true时，如下：<body> <div id="app"> <base-input required p...
复制链接

扫一扫

专栏目录