Upgrade to Pro — share decks privately, control downloads, hide ads and more …

about abstract component design using slots of ...

arm4
July 10, 2019

about abstract component design using slots of Vue.js

arm4

July 10, 2019
Tweet

More Decks by arm4

Other Decks in Programming

Transcript

  1. 5 ࠓ೔࿩͢͜ͱ l 4MPUΛ࢖͏ಈػ 4MPUΛ࢖͏ͱ͜Μͳίϯϙʔωϯτ͕࡞ΕΔʂ l 4MPU͜ͱ͸͡Ί 4MPUͬͯԿʁ ໊લ෇͖TMPU /BNFE4MPU

    ͱ͸ʁ είʔϓ෇͖TMPU 4DPQFE4MPU ͱ͸ʁ l 4MPU׆༻ྫ l 6*ϑϨʔϜϫʔΫΛ࢖͓͏ʂ l 4MPUͷ஫ҙ఺
  2. 12 ίϯϙʔωϯτͷڞ௨ͷ෦෼͚ͩΛ ίϯϙʔωϯτԽͯ͠ɺ ͋ͱ͸ࣗ༝ʹɺ ࢖͏࣌ʹΧελϚΠζ͍ͨ͠ʂ ڞ௨෦෼ • IPWFS͢Δͱπʔϧνοϓ͕දࣔ͞ΕΔ • λΠτϧͱຊจ͕͋Δ

    • ࿮ͱλΠτϧͷσβΠϯ • ΞΠίϯ͕දࣔͰ͖Δ ΧελϚΠζ෦෼ • λΠτϧ෦෼ͷϑΥϯταΠζ΍৭ • ຊจʹ௥Ճ͢Δίϝϯτ΍ΞΠίϯɺϑΥϯταΠζ΍৭
  3. Slot “ <slot>       

    https://jp.vuejs.org/v2/guid e/components-slots.html 17 ίϯϙʔωϯτΛ࢖͏࣌ʹ දࣔ಺༰͕౉ͤΔʂ TMPU෦෼ʹ λάͰғ·Εͨίϯςϯπ͕ೖΔ Button  Button
  4. Slot        HTML 

    18       Button Button
  5. Slot         

       19      Button  Button Button
  6. Slot     $  %#  

      &  ' 20     Button Button"!
  7. slot(Named Slot) !    "  # 21

    ActionButton ActionButton 
  8. slot(Scoped Slot) slot       22

    ActionButton  ActionButton  ͜ͷΑ͏ʹ ίϯϙʔωϯτͷσʔλΛ εϩοτʹWCJOEͰ౉͓ͯ͘͠ͱ ࢖༻࣌ͷεϩοτίϯςϯπͰ ͦͷσʔλΛ࢖͏͜ͱ͕Ͱ͖Δ TMPUʹόΠϯυ͞ΕͨଐੑΛ εϩοτϓϩύςΟ ͱݺͿ
  9. Slot  Vue 2.6.0 ) . 30 lTMPU͓Αͼ TMPUTDPQFଐੑ͸ࠓޙͷ YϦϦʔεͰҾ͖ଓ͖αϙʔτ͞Ε·͕͢ɺ

    ެࣜʹඇਪ঑ͱͳΓɺ7VF Ͱ͸࡟আ͞ΕΔͰ͠ΐ͏ɻz https://jp.vuejs.org/v2/guide/components-slots.html - -%! +& -%! slot *( - slotslot-scope#$ ", ' slot *( - v-slot ", ͜Ε·Ͱ͸IUNMཁૉΛ ௚઀TMPUίϯςϯπͷ ίϯςφʹͰ͖ͨ WTMPU͸ݪଇ͸ UFNQMBUFʹ͔͠෇༩ Ͱ͖ͳ͍σΟϨΫςΟϒ ৄࡉ͸υΩϡϝϯτࢀর