美文网首页
Vue3组件传值之props与attrs的区别

Vue3组件传值之props与attrs的区别

作者: Marshall3572 | 来源:发表于2021-11-21 17:31 被阅读0次

    $attrs 属性可以看做 props 的加强版,用来简化 vue 组件传值
    先说区别:

    • props 要先声明才能取值,attrs 不用先声明
    • props 声明过的属性,attrs 里不会再出现
    • props 不包含事件,attrs 包含
    • props 支持 string 以外的类型,attrs 只有 string 类型

    下面我们举例说明

    在父组件中我们传三个时间一个属性,在子组件中分别将props和attrs的值打印出来 结果显示 props 是一个空对象,而 attrs 中包含了所有父组件传递的方法和属性
    那如果我们在子组件中声明了 props 呢?
    将 size 属性在 props 中进行声明,再执行打印,果然 size 属性出现在了 props 对象中,而 attrs 中这次却没有再体现: 接下来我们在父组件中增加一个值为 Boolean 的属性 看到出现在 attrs 中的 disabled 是一个 值为空字符串的属性: 我们在 props 中声明 disabled 为 Boolean 类型: 重新打印结果:

    以上两次打印得出第四条结论:props 支持 string 以外的类型,attrs 只有 string 类型

    完整代码:
    父组件

    <template>
    <Button @click="onClick" @mouseover="onClick" @focus="onClick" size="small" disabled>
      你好
    </Button>
    </template>
    
    <script lang="ts">
    import Button from '../lib/Button.vue'
    export default {
      components: {
        Button,
      },
      setup() {
        const onClick = () => {
          console.log('hi')
        }
        return {
          onClick,
        }
      },
    }
    </script>
    

    子组件

    <template>
    <div>
      <button>
        <slot />
      </button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
      props: {
        size: String,
        disabled: Boolean,
      },
      setup(props, context) {
        console.log('props:', {
          ...props,
        })
        console.log('context.attrs:', {
          ...context.attrs,
        })
      },
    }
    </script>
    

    相关文章

      网友评论

          本文标题:Vue3组件传值之props与attrs的区别

          本文链接:https://www.haomeiwen.com/subject/yqlmtrtx.html