{site_name}

{site_name}

🌜 搜索

在Vue 3.0中,非prop的attribute是指在Vue组件中可以直接使用但不会被声明为props的HTML属性

前端 𝄐 0
vue3不需要vuex,vue3 prototype,vue3.0新特性 proxy,vue prop being mutated,vue3provide,vue.prototype.bus
在Vue 3.0中,非prop的attribute是指在Vue组件中可以直接使用但不会被声明为props的HTML属性。这些属性可以通过 $attrs 对象访问到,并且会被传递给子组件。

例如,假设有一个自定义的Input组件,在这个组件中可以接收 value 和 type 作为props。但是,如果你在父组件中使用这个Input组件时还想传递一个 placeholder 属性,但是又不想将其声明为一个prop,那么你可以这样写:

html
<template>
<Input v-model="message" type="text" placeholder="请输入内容"/>
</template>


在Input组件中,可以通过 $attrs 访问到 placeholder 属性:

html
<template>
<input v-bind="$attrs" :value="value" @input="$emit('update:value', $event.target.value)">
</template>


这里 $attrs 是一个对象,包含了所有传递给Input组件但没有被声明为prop的属性。在上面的例子中,$attrs 就会包含 { placeholder: '请输入内容' }。

注意:在使用 $attrs 时需要特别小心,因为它也会包含一些 Vue 内部用于处理事件、插槽等的属性,所以可能会导致意外的行为。