非prop属性标签在样式起作用时不起作用

Question

我有一个名为PasswordInput的自定义组件，定义为

<template>
  <v-text-field
    :type="showPassword ? 'text' : 'password'"
    prepend-icon="mdi-lock"
    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
    @click:append="showPassword = !showPassword"
  />
</template>

<script>
export default {
  data() {
    return {
      showPassword: false
    }
  }
}
</script>

并以此方式使用

<password-input
  label="Password"
  style="background-color:red"
></password-input>

但是，尽管样式已传递给route元素，但标签似乎不起作用，如此处

Answer 1

绑定 您要应用的所有attributes至v-text-field 父组件中的password-input。

<v-text-field
 v-bind="$attrs" // <-- Here
 :type="showPassword ? 'text' : 'password'"
 prepend-icon="mdi-lock"
 :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
 @click:append="showPassword = !showPassword"
/>