Vue: Как использовать значение проп в шаблоне компонента

Question

Я использую общий компонент выбора файлов из https://alligator.io/vuejs/file-select-component/, и теперь я хочу иметь возможность передавать значение «принять» также извне.Другими словами, я хочу быть в состоянии сделать что-то вроде

<file-select :accept="application/json,.json"></file-select>

, что должно перевести на

<input type="file" accept="application/json,.json"/>

Но пока что мои попытки связать значениевсе атрибуты accept ввода prop в файл потерпели неудачу (например, с использованием {{ accept }} или this.accept).Мне было интересно, могу ли я напрямую использовать значение проп в шаблоне моего компонента.любые идеи будут с благодарностью!

Answer 1

Вы можете получить доступ к собственному элементу компонента FileSelect и вручную присвоить ему атрибут accept.

template:

<file-select ref="fileSelect"></file-select>

js:

mounted() {
    this.$refs.fileSelect.$el.accept = "application/json,.json";
}

Answer 2

Вы можете расширить их компонент, добавив свойство accept, но, учитывая, что это такой маленький компонент, вам может быть лучше изменить код, приведенный в руководстве, чтобы добавить prop.

Vueлюбой атрибут non-prop для корневого элемента , поэтому, когда вы делаете <file-select :accept="application/json,.json"></file-select>, label получает добавленное accept в качестве атрибута, если input был корнем, тогда этобудет работать так, как вам нужно.

Чтобы узнать, как расширить компоненты, есть еще одно руководство alligator.io по составу компонентов , которое должно помочь вам понять, как этого добиться в Vue.Тем не менее, поскольку шаблон не готов для этого нового объекта, вам необходимо полностью переопределить html.

Как уже упоминалось, вы можете просто использовать их пример кода для создания собственного компонента, который принимает accept опора и использует его в правильном месте.Расширение может быть больше проблем, чем стоит, но хорошая информация, чтобы иметь.