ការប្រើ Component នៅក្នុង Vue js

• Khemarak In


• 18 Dec 2016

អត្ថបទនេះ Techfree នឹងធ្វើការបង្ហាញអំពីការប្រើប្រាស់ Component នៅក្នុង Vue js (javascript framewok)។ Component គឺវាមានលក្ខណៈពិសេសមួយដែលអាចអោយលោកអ្នកធ្វើការបន្ថែមមុខងារទៅលើ HTML elements ដោយការដាក់នៃបញ្ចូលនៃកូដ។ ដើម្បីអោយកាន់តែច្បាស់លោកអ្នកអាចធ្វើកធ្វើអនុវត្ត ទៅលើឩទាហរណ៍ដែល Techfree បានផ្តល់ជូនដូចខាងក្រោម៖

រូបមន្តក្នងការបង្កើត Component គឺ៖

Vue.component(tagName, options)

ឩទាហរណ៍ៈ ការបង្កើត Component លក្ខណះ global component

1. បង្កើត File New =>app.js បញ្ចូលកូដដូចខាងក្រោម៖

នៅលើបន្ទាត់ទី ២ my-componentៈ គឺជាឈ្មោះComponent ដែលយើងបង្កើត

2. បង្កើត File New =>index.html រូចបញ្ចូលកូដដូចខាងក្រោម

នៅលើបន្ទាត់ទី១៣ៈយើងធ្វើការហៅឈ្មោះComponent ដែលយើងបង្កើតនៅក្នង app.jsមកបង្ហាញ

• លទ្ធផលខាងលើនឹងបង្ហាញដូចខាងក្រោម

ឩទាហរ២ណ៍ៈ ការបង្កើត Component លក្ខណះ Local component

លោកអ្នកធ្វើការបង្កើត local component ដោយប្រើ scope នៃ instance/component ដោយប្រើវាជាមួយនឹង components instance option: ។ដើម្បីអោយកាន់តែច្បាស់លោកអ្នកអាចធ្វើអនុវត្តដូចខាងក្រោម៖

1. បង្កើត File New =>local.js រូចសរសេកូដដូចខាងក្រោម៖

ខាងលើយើងធ្វើការការបង្កើត component ចំនូនពីរ គឺ Child component ហើយនឹង parent component ។

1. នៅលើបន្ទាត់ទី៦ គឺ<my-component></my-component>ជាឈ្មោះ Component ដែលយើងបានបង្កើតដែលបានទាញចេញពី Child component ខាងលើដោយប្រើ Scope ( : )។
2. នៅលើបន្ទាត់ទី១៤ គឺយើងធ្វើការបង្កើត component ធ្វើមួយដែលទាញចេញពី parent component។

2.បង្កើត File New =>local.html ដើម្បីបង្ហាញComponent ដោយធ្វើការសរសេកូដដូចខាក្រោម៖

• ចំលើខាងលើនឹងបង្ហាញដូចខាងក្រោម៖