Vue 封装第三方组件时的属性绑定(非 Prop 的特性)

Vue组件属性绑定

最新推荐文章于 2024-10-09 13:32:08 发布

原创最新推荐文章于 2024-10-09 13:32:08 发布 · 970 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #非prop

前端专栏收录该内容

4 篇文章

订阅专栏

本文讲解了在Vue中如何通过$attrs和inheritAttrs:false实现第三方组件的属性绑定，以及如何禁用特性继承，提供了具体示例代码。

Vue 封装第三方组件时的属性绑定

$attrs，必须与 inheritAttrs: false 配合使用

禁用特性继承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。例如：

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})
这尤其适合配合实例的 $attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值，例如：

{
  required: true,
  placeholder: 'Enter your username'
}
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。在撰写基础组件的时候是常会用到的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})