Vue中的Non-props

最新推荐文章于 2025-03-06 09:15:16 发布

原创最新推荐文章于 2025-03-06 09:15:16 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

Vue 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了Vue组件中的Non-props概念，如何通过`inheritAttrs`控制属性传递，以及不同场景下标签绑定的方法。重点讲解了禁用非props属性和正确使用组件间的属性传递策略。

1.Non-props

概念：如果我们不用props属性但是也想使用传过来的值，这就是Non-props的含义。

const app = Vue.createApp({
      data() {
        return {
          num: 1,
        };
      },
      template: `
        <div>
            <counter msg="hello" />
            
        </div>`,
    });

    app.component("counter", {
      mounted() {
        //在attrs属性中会有传过来的值
        console.log(this.$attrs.msg);
      },
      template: `
      <div :msg="$attrs.msg">Counter</div>
      `,
    });

未加inheritAttrs:false

加了之后

2.禁止Non-props

在组件中加入inherit:false可以阻止Vue自动往最外层的组件添加传过来的值

    app.component("counter", {
      inheritAttrs: false,
      mounted() {
        console.log(this.$attrs.msg);
      },
      template: `
      <div>Counter</div>
      `,
    });

3.将传过来的值绑定在标签上

 app.component("counter", {
      mounted() {
        console.log(this.$attrs.msg);
      },
      template: `
      // 绑定在标签上，这里可以传一些样式进来
      <div :="$attrs">Counter</div>
      `,
    });