[Vue] 17.Vue中的组件：Non-Props属性是什么

最新推荐文章于 2025-05-22 10:13:24 发布

weiweicn!

最新推荐文章于 2025-05-22 10:13:24 发布

阅读量263

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u014627255/article/details/125472717

版权

Vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了Vue.js中如何处理父组件传递但未被子组件声明为props的non-props属性。通过设置`inheritAttrs: false`可以避免这些属性附加到子组件标签上。如果希望在多根节点的子组件中接收特定non-props属性，可以使用`v-bind`指令。此外，展示了如何在组件的`mounted()`生命周期钩子中访问这些属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义：non-props属性是指父组件传给子组件值，但是子组件并没有去接收，此时值会加到子组件的标签属性中。若想去掉该属性，可在子组件创建的时候加‘inheritAttrs: false’
如果子组件有多个根节点，只有其中一个想接收传过来的non-props属性，则可以在接收的那个加’v-bind’属性接收
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const app = Vue.createApp({
            template: `<div><counter msg="hello"/></div>`
        });
        app.component('counter', {
            // props: ['msg'],
            template: `<div>Counter</div>
            <div v-bind="$attrs">Counter</div>
            <div>Counter</div>
            `
        })
        const vm = app.mount('#root')
    </script> 
</body>
</html>

在这里插入图片描述
如果想拿到其中的一个non-props属性，则可以如下：

<script>
        const app = Vue.createApp({
            template: `<div><counter msg="hello" msg1="hello1"/></div>`
        });
        app.component('counter', {
            // props: ['msg'],
            template: `<div v-bind:msg="$attrs.msg">Counter</div>
            <div>Counter</div>
            <div>Counter</div>
            `
        })
        const vm = app.mount('#root')
    </script>

在这里插入图片描述
还可以在生命周期函数mounted()中获取属性

<script>
        const app = Vue.createApp({
            template: `<div><counter msg="hello" msg1="hello1"/></div>`
        });
        app.component('counter', {
            // props: ['msg'],
            // 组件渲染完之后会自动执行
            mounted() {
                console.log(this.$attrs);
            },
            template: `<div v-bind:msg="$attrs.msg">Counter</div>
            <div>Counter</div>
            <div>Counter</div>
            `
        })
        const vm = app.mount('#root')
    </script>

在这里插入图片描述