Vue: рдЬрдм рдШрдЯрдХ рдХреЗ рдкрд╛рд╕ рдХреЛрдИ рд╕рд╣рд╛рд░рд╛ рдирд╣реАрдВ рд╣реИ, рддреЛ $ attrs рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 1 рдЕрдЧре░ 2017  ┬╖  8рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рд╕рдВрд╕реНрдХрд░рдг

реи.рек.реи

рдкреНрд░рдЬрдирди рд▓рд┐рдВрдХ

https://jsfiddle.net/50wL7mdz/50757/

рдкреНрд░рдЬрдирди рдХрд░рдиреЗ рдХрд┐ рдкреНрд░рдХреНрд░рд┐рдпрд╛

рдШрдЯрдХ рд╕рдВрджрд░реНрдн рдХреЗ рднреАрддрд░ рд╡рд╕реНрддреБ рдХреЗ рд░реВрдк рдореЗрдВ $ рдЕрдЯрд░рд╕ рдПрдХреНрд╕реЗрд╕ рдХрд░реЗрдВ, рдЬрдм рдХреЛрдИ рдкреНрд░реЙрдк рдкреНрд░рджрд╛рди рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ред

рдХреНрдпрд╛ рдЙрдореНрдореАрдж рд╣реИ?

$ рдЕрдЯреНрд░реНрд╕ рдПрдХ рдРрд╕реА рд╡рд╕реНрддреБ рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рдмрд┐рдирд╛ рдорд╛рдиреНрдпрддрд╛ рдХреЗ рдкреНрд░реЙрдкреНрд╕ рд╣реЛрддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рдореИрдВ рдПрдХ рдЦрд╛рд▓реА рд╡рд╕реНрддреБ рдХреА рдЙрдореНрдореАрдж рдХрд░реВрдВрдЧрд╛, рдЬрдм рдШрдЯрдХ рдЯреИрдЧ рдкрд░ рдХреЛрдИ рдкреНрд░реЙрдкрд░ рдирд┐рд░реНрджрд┐рд╖реНрдЯ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпрд╛ рд╣реЛ рд░рд╣рд╛ рд╣реИ?

$ рдЕрдЯреИрдЪ рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реИ

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдмрд╕ рдЗрд╕рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдФрд░ рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдореЗрд░реЗ рд▓рд┐рдП рдЕрдкреНрд░рддреНрдпрд╛рд╢рд┐рдд рдерд╛ рдХрд┐ $attrs рдХрднреА рднреА undefined рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрджрд┐ рдЖрдк рдпрд╣ рд╣реИ рдХрд┐ рдХреЛрдИ рд╕рдм рдХреЗ рд╕рд╛рде рдмрд╛рд╣рд░ рд╢реБрд░реВ рд╣реЛрддрд╛ рд╣реИ рдПрдХ рдХрд╛рд░реНрдпрд╕реВрдЪреА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд▓рд┐рдЦ рд░рд╣реЗ рдереЗ, рдпрд╣ рдмрд╣реБрдд рд╣реА рдЕрдЬреАрдм рд╕реВрдЪреА рдХреЗ рд░реВрдк рдореЗрдВ рд╢реБрд░реВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ undefined рдХреЗ рдмрдЬрд╛рдп [] ред рдЖрдкрдХреЛ рдЕрдкрдиреЗ рдРрдк рдкрд░ if рд╕реНрдЯреЗрдЯрдореЗрдВрдЯ (рдпрд╛ рд╡реИрдХрд▓реНрдкрд┐рдХ рдЪреЗрдирд┐рдВрдЧ) рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛ред рдпрд╣ рдорд╛рдорд▓рд╛ рднреА рдРрд╕рд╛ рд╣реА рд╣реИред

рдЖрд▓рд╛ рдорд╛рдорд▓реЛрдВ рдХреЗ рд▓рд┐рдП рдЬрдм рдХреЛрдИ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЬрд╛рдБрдЪ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реИ рдХрд┐ рдХреЛрдИ $attrs рдореМрдЬреВрдж рд╣реИ, рддрдм рднреА Object.keys($attrs).length рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реЛрдЧрд╛, рддрд╛рдХрд┐ рдорд╛рдорд▓рд╛ рдЕрднреА рднреА рдХрд╡рд░ рд╣реЛред

рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ рдХрд┐ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдореБрдЭреЗ рдпрдХреАрди рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмрдЧ рд╣рд╛рд▓рд╛рдВрдХрд┐ рд╣реИ, рдХрд┐ $attrs _is_ рд╣реИ рдЬрдм рдПрдХ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреНрд░рд╕реНрддрд╛рд╡ рдкрд╛рд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ - рдПрдХ рдЦрд╛рд▓реА рд╡рд╕реНрддреБ рдХреЗ рд▓рд┐рдП рд╕реЗрдЯ - рдХреЗ рд░реВрдк рдореЗрдВ рдУрдкреА рдмрддрд╛рддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рд╡рд░реНрддрдорд╛рди рдореЗрдВ, рдпрджрд┐ рдХреЛрдИ $attrs рдореМрдЬреВрдж рд╣реИ, рддреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рджреЛрдиреЛрдВ рд░рдгрдиреАрддрд┐рдпреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА:

$attrs && Object.keys($attrs).length

рд╕рднреА 8 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЬрд┐рдЬреНрдЮрд╛рд╕рд╛ рд╕реЗ рдмрд╛рд╣рд░, рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд $attrs рд╣реЛрдиреЗ рд╕реЗ рдЖрдкрдХреЛ рдХреНрдпрд╛ рд╕рдорд╕реНрдпрд╛ рдЖ рд░рд╣реА рд╣реИ? рдХреНрдпрд╛ рдЖрдк $attrs.something рддрдХ рдкрд╣реБрдБрдЪ рд░рд╣реЗ рд╣реИрдВ? (рдпрджрд┐ рд╣рд╛рдВ, рддреЛ рдХреНрдпреЛрдВ?)

рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ: рдореИрдВ рдпрд╣ рднреА рдкреВрдЫ рд░рд╣рд╛ рд╣реВрдВ рдХреНрдпреЛрдВрдХрд┐ $attrs рдмрд░рд╛рдмрд░ рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реЛрдиреЗ рдкрд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреЛрдИ рдЕрдЯрд╛рд░реНрдиреА рдЙрдкрдпреЛрдЧреА рдирд╣реАрдВ рд╣реЛ рд╕рдХрддреА рд╣реИ

@greegus , рдЕрдЧрд░ рдЖрдк if ($attrs.myProp) рддрд░рд╣ рдХреБрдЫ рдХрд░ рд░рд╣реЗ рд╣реИрдВ, рддреЛ рдЖрдк babel- рдкреНрд▓рдЧрдЗрди-рдЯреНрд░рд╛рдВрд╕рдлреЙрд░реНрдореЗрд╢рди-рдСрдкреНрд╢рдирд▓-рдЪреЗрдирд┐рдВрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ if ($attrs?.myProp) рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

рдореИрдВ рдЗрд╕реЗ рдиреНрдпрд╛рдпрдкреВрд░реНрдг рд╡реНрдпрд╡рд╣рд╛рд░ рдорд╛рдиреВрдВрдЧрд╛, рд▓реЗрдХрд┐рди рдпрд╣ рдмрд╣рд╕ рдХрд╛ рд╡рд┐рд╖рдп рд╣реИред

рдкрд┐рдВрдЧ @greegus

рдмрд╕ рдЗрд╕рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдФрд░ рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдореЗрд░реЗ рд▓рд┐рдП рдЕрдкреНрд░рддреНрдпрд╛рд╢рд┐рдд рдерд╛ рдХрд┐ $attrs рдХрднреА рднреА undefined рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрджрд┐ рдЖрдк рдпрд╣ рд╣реИ рдХрд┐ рдХреЛрдИ рд╕рдм рдХреЗ рд╕рд╛рде рдмрд╛рд╣рд░ рд╢реБрд░реВ рд╣реЛрддрд╛ рд╣реИ рдПрдХ рдХрд╛рд░реНрдпрд╕реВрдЪреА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд▓рд┐рдЦ рд░рд╣реЗ рдереЗ, рдпрд╣ рдмрд╣реБрдд рд╣реА рдЕрдЬреАрдм рд╕реВрдЪреА рдХреЗ рд░реВрдк рдореЗрдВ рд╢реБрд░реВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ undefined рдХреЗ рдмрдЬрд╛рдп [] ред рдЖрдкрдХреЛ рдЕрдкрдиреЗ рдРрдк рдкрд░ if рд╕реНрдЯреЗрдЯрдореЗрдВрдЯ (рдпрд╛ рд╡реИрдХрд▓реНрдкрд┐рдХ рдЪреЗрдирд┐рдВрдЧ) рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛ред рдпрд╣ рдорд╛рдорд▓рд╛ рднреА рдРрд╕рд╛ рд╣реА рд╣реИред

рдЖрд▓рд╛ рдорд╛рдорд▓реЛрдВ рдХреЗ рд▓рд┐рдП рдЬрдм рдХреЛрдИ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдЬрд╛рдБрдЪ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реИ рдХрд┐ рдХреЛрдИ $attrs рдореМрдЬреВрдж рд╣реИ, рддрдм рднреА Object.keys($attrs).length рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реЛрдЧрд╛, рддрд╛рдХрд┐ рдорд╛рдорд▓рд╛ рдЕрднреА рднреА рдХрд╡рд░ рд╣реЛред

рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ рдХрд┐ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдореБрдЭреЗ рдпрдХреАрди рд╣реИ рдХрд┐ рдпрд╣ рдПрдХ рдмрдЧ рд╣рд╛рд▓рд╛рдВрдХрд┐ рд╣реИ, рдХрд┐ $attrs _is_ рд╣реИ рдЬрдм рдПрдХ рдШрдЯрдХ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреНрд░рд╕реНрддрд╛рд╡ рдкрд╛рд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ - рдПрдХ рдЦрд╛рд▓реА рд╡рд╕реНрддреБ рдХреЗ рд▓рд┐рдП рд╕реЗрдЯ - рдХреЗ рд░реВрдк рдореЗрдВ рдУрдкреА рдмрддрд╛рддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рд╡рд░реНрддрдорд╛рди рдореЗрдВ, рдпрджрд┐ рдХреЛрдИ $attrs рдореМрдЬреВрдж рд╣реИ, рддреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рджреЛрдиреЛрдВ рд░рдгрдиреАрддрд┐рдпреЛрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА:

$attrs && Object.keys($attrs).length

@chrisvfritz рдиреЗ рдореБрдЭреЗ рдЖрд╢реНрд╡рд╕реНрдд рдХрд┐рдпрд╛ - рдпрд╣ рдПрдХ рдмрдЧ рд╣реИред

@LinusBorg рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХреЛрдИ рднреА рдЗрд╕ рдмрдЧ рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИред рдХреНрдпрд╛ рдореБрдЭреЗ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдкреАрдЖрд░ рдЪрд╛рд╣рд┐рдП?

рдЬрд╝рд░реВрд░!

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

loki0609 picture loki0609  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

wufeng87 picture wufeng87  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

finico picture finico  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

lmnsg picture lmnsg  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

aviggngyv picture aviggngyv  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ