vue3关闭透传Attributes后怎么把属性传到子元素上？

  • Z时代
  • 2024-03-03
  • 分类：IT

<script setup lang="ts">
import { useAttrs } from 'vue'
defineOptions({
  inheritAttrs: false
})
const attrs = useAttrs()
</script>
<template>
  <div>
    <input type="text" class="form-control">
  </div>
</template>

回答：

v-bind="attrs"

<div>
    <input type="text" class="form-control" v-bind="attrs" />
  </div>

回答：

隔代传递数据的话，我建议走 Provide/Inject，或者干脆用 Pinia 等状态管理工具。否则会造成几代组件间深度耦合，不利于未来维护。

回答：

默认情况下，父组件传递的，但没有被子组件解析为 props 的 attributes 绑定会被“透传”。这意味着当我们有一个单根节点的子组件时，这些绑定会被作为一个常规的 HTML attribute 应用在子组件的根节点元素上。

我们可以通过设置 inheritAttrs 为 false 来禁用这个默认行为。

<script setup>
defineProps(['label', 'value'])
defineEmits(['input'])
defineOptions({ inheritAttrs: false })
</script>
<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </label>
</template>

参考Vue文档

以上是 vue3关闭透传Attributes后怎么把属性传到子元素上？ 的全部内容， 来源链接： utcz.com/p/935106.html

回到顶部