{"id":197,"date":"2021-09-24T07:36:00","date_gmt":"2021-09-24T07:36:00","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=197"},"modified":"2026-02-20T07:28:18","modified_gmt":"2026-02-20T07:28:18","slug":"dziedziczenie-atrybutow-w-vue-js","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/dziedziczenie-atrybutow-w-vue-js\/","title":{"rendered":"Dziedziczenie atrybut\u00f3w w Vue.js"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Podczas tworzenia aplikacji przy u\u017cyciu Vue.js (oraz podobnych framework\u00f3w), bardzo prawdopodone, \u017ce zajdzie potrzeba stworzenia komponentu pola wej\u015bciowego. W trakcie rozwoju projektu, mo\u017ce si\u0119 okaza\u0107 \u017ce pole mo\u017ce przybiera\u0107 r\u00f3\u017cne formy, np. pole z podpowiedzi\u0105, etykiet\u0105, prefiksem, sufiksem, ikon\u0105, wiadomo\u015bci\u0105 o walidacji itp.<\/p>\n\n\n\n

\"\"
R\u00f3\u017cne typy p\u00f3l wej\u015bciowych<\/figcaption><\/figure>\n\n\n\n

Z punktu widzenia kodu HTML<\/kbd>, sam element pola nie wystarczy, aby zbudowa\u0107 widoczne na przyk\u0142adzie uk\u0142ady. Wymagane jest do tego wi\u0119cej element\u00f3w HTML. Sp\u00f3jrz na przyk\u0142ady poni\u017cej:<\/p>\n\n\n\n

Default input:<\/em><\/p>\n\n\n

<input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Input with hint<\/em>:<\/p>\n\n\n
<input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span>\n<div<\/span>><\/span>Nam pretium mi tempor eros interdum.<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Input with label:<\/em><\/p>\n\n\n
<label<\/span>><\/span>\n  <div<\/span>><\/span>Name<\/div<\/span>><\/span>\n  <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span>\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Input with prefix<\/em>:<\/p>\n\n\n
<div<\/span>><\/span>\n  <div<\/span>><\/span>Prefix<\/div<\/span>><\/span>\n  <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Input with suffix<\/em>:<\/p>\n\n\n
<div<\/span>><\/span>\n  <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span>\n  <div<\/span>><\/span>Suffix<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
All in one:<\/em><\/p>\n\n\n
<label<\/span>><\/span>\n  <div<\/span>><\/span>Name<\/div<\/span>><\/span>\n  <div<\/span>><\/span>  \n    <div<\/span>><\/span>Prefix<\/div<\/span>><\/span>\n    <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> \/><\/span>\n    <div<\/span>><\/span>Suffix<\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span>><\/span>Nam pretium mi tempor eros interdum.<\/div<\/span>><\/span>\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
U\u017cycie dyrektywy v-model oraz nas\u0142uchiwanie na zdarzenia w utworzonym komponencie<\/h2>\n\n\n\n
Podczas przypisywania dyrektywy v-model<\/kbd> w komponencie:<\/p>\n\n\n
<InputField<\/span> v-model<\/span>=\"inputValue\"<\/span>\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
kod nie zadzia\u0142a w\u0142a\u015bciwie i nie przypisze odpowiednich danych do komponentu, a tak\u017ce nie b\u0119dzie odpowiednio nas\u0142uchiwa\u0142 na zdarzenia, je\u017celi pole wej\u015bciowe b\u0119dzie otoczone dodatkowymi elementami HTML (jak na przyk\u0142adzie). Dzieje si\u0119 tak przez domy\u015bly mechanizm dziedziczenia atrybut\u00f3w. Vue automatycznie przeniesie atrybuty i funkcje nas\u0142uchuj\u0105ce na zdarzenia na najwy\u017cszy element otaczaj\u0105cy komponent. To powoduje problem przy zarz\u0105dzaniu stanem formularza. Na szcz\u0119\u015bcie, to zachowanie mo\u017ce zosta\u0107 zmienione poprzez u\u017cycie w\u0142a\u015bciwo\u015bci inheritAttrs<\/kbd> w skrypcie komponentu w exportowanym obiekcie:<\/p>\n\n\n
<script>\n  export<\/span> default<\/span> {\n    name<\/span>: 'input-field'<\/span>,\n    data<\/span>: {\n      inputValue<\/span>: ''<\/span>\n    },\n    inheritAttrs<\/span>: false<\/span>\n    \/\/ [...]<\/span>\n  }\n<\/script><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Ustawiaj\u0105c w\u0142a\u015bciwo\u015b\u0107 inheritAttrs<\/kbd> na false<\/kbd>, Vue nie powi\u0105\u017ce atrybut\u00f3w bezpo\u015brednio z elementem otaczaj\u0105cym komponent. Zamiast tego programista mo\u017ce zdecydowa\u0107, gdzie powinny one by\u0107 powi\u0105zane. Aby to zrobi\u0107, powi\u0105\u017c zmienne globalne $attrs i $listeners z elementem pola:<\/p>\n\n\n
<label<\/span>><\/span>\n  <div<\/span>><\/span>Name<\/div<\/span>><\/span>\n  <div<\/span>><\/span>  \n    <div<\/span>><\/span>Prefix<\/div<\/span>><\/span>\n    <input<\/span> type<\/span>=\"text\"<\/span> placeholder<\/span>=\"Default input\"<\/span> name<\/span>=\"example\"<\/span> v-bind<\/span>=\"$attrs\"<\/span> v-on<\/span>=\"$listeners\"<\/span> \/><\/span>\n    <div<\/span>><\/span>Suffix<\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <div<\/span>><\/span>Nam pretium mi tempor eros interdum.<\/div<\/span>><\/span>\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Dzi\u0119ki temu wszystkie zdarzenia b\u0119d\u0105 emitowane do komponentu nadrz\u0119dnego, a dane przekazywane do wybranego elementu.<\/p>\n\n\n\n
\n
By default, parent scope attribute bindings that are not recognized as props will \u201cfallthrough\u201d and be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting inheritAttrs to false, this default behavior can be disabled. The attributes are available via the $attrs instance property (also new in 2.4) and can be explicitly bound to a non-root element using v-bind.\n\nNote: this option does not affect class and style bindings.<\/p>\nhttps:\/\/vuejs.org\/v2\/api\/#inheritAttrs<\/cite><\/blockquote>\n\n\n\n
<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
Podczas tworzenia aplikacji przy u\u017cyciu Vue.js (oraz podobnych framework\u00f3w), bardzo prawdopodone, \u017ce zajdzie potrzeba stworzenia komponentu pola wej\u015bciowego. W trakcie rozwoju projektu, mo\u017ce si\u0119 okaza\u0107 \u017ce pole mo\u017ce przybiera\u0107 r\u00f3\u017cne formy, np. pole z podpowiedzi\u0105, etykiet\u0105, prefiksem, sufiksem, ikon\u0105, wiadomo\u015bci\u0105 o walidacji itp. Z punktu widzenia kodu HTML, sam element pola nie wystarczy, aby zbudowa\u0107 […]<\/p>\n","protected":false},"author":10,"featured_media":199,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,4],"tags":[60,61,59],"class_list":["post-197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ciekawostki","category-web-development","tag-attribute-inheritance","tag-v-model","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":3,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/197\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/197\/revisions\/706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/199"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}