VueJS - ส่วนประกอบ

Vue Components เป็นคุณสมบัติที่สำคัญอย่างหนึ่งของ VueJS ที่สร้างองค์ประกอบที่กำหนดเองซึ่งสามารถนำมาใช้ซ้ำใน HTML ได้

มาทำงานกับตัวอย่างและสร้างส่วนประกอบซึ่งจะทำให้เข้าใจได้ดีขึ้นเกี่ยวกับการทำงานของส่วนประกอบกับ VueJS

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

ในไฟล์. html เราได้สร้างสอง div พร้อม id component_test และ component_test1. ใน.jsไฟล์ที่แสดงด้านบนอินสแตนซ์ Vue สองรายการถูกสร้างขึ้นด้วยรหัส div เราได้สร้างองค์ประกอบทั่วไปเพื่อใช้กับทั้งมุมมองอินสแตนซ์

ในการสร้างส่วนประกอบต่อไปนี้คือไวยากรณ์

Vue.component('nameofthecomponent',{ // options});

เมื่อสร้างส่วนประกอบแล้วชื่อของส่วนประกอบจะกลายเป็นองค์ประกอบที่กำหนดเองและสามารถใช้สิ่งเดียวกันนี้ในองค์ประกอบอินสแตนซ์ Vue ที่สร้างขึ้นกล่าวคือภายใน div ที่มีรหัส component_test และ component_test1.

ใน .js เราได้ใช้ส่วนประกอบการทดสอบเป็นชื่อของส่วนประกอบและใช้ชื่อเดียวกันกับองค์ประกอบที่กำหนดเองภายใน divs

ตัวอย่าง

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

ในส่วนประกอบที่สร้างขึ้นในไฟล์ .jsเราได้เพิ่มเทมเพลตที่เราได้กำหนดรหัส HTML ซึ่งเป็นวิธีการregistering a global componentซึ่งสามารถสร้างเป็นส่วนหนึ่งของอินสแตนซ์ vue ใด ๆ ตามที่แสดงในสคริปต์ต่อไปนี้

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

ในการดำเนินการสิ่งเดียวกันนี้จะปรากฏในเบราว์เซอร์

ส่วนประกอบจะได้รับแท็กองค์ประกอบที่กำหนดเองเช่น <testcomponent></testcomponent>. อย่างไรก็ตามเมื่อเราตรวจสอบสิ่งเดียวกันในเบราว์เซอร์เราจะไม่สังเกตเห็นแท็กที่กำหนดเองใน HTML ธรรมดาที่มีอยู่ในเทมเพลตดังที่แสดงในภาพหน้าจอต่อไปนี้

นอกจากนี้เรายังทำให้ส่วนประกอบเป็นส่วนหนึ่งของอินสแตนซ์ vue โดยตรงดังที่แสดงในสคริปต์ต่อไปนี้

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

นี้เรียกว่า local registration และส่วนประกอบจะเป็นส่วนหนึ่งของอินสแตนซ์ vue ที่สร้างขึ้นเท่านั้น

จนถึงตอนนี้เราได้เห็นส่วนประกอบพื้นฐานพร้อมตัวเลือกพื้นฐานแล้ว ตอนนี้เรามาเพิ่มตัวเลือกอื่น ๆ เช่นข้อมูลและวิธีการ เช่นเดียวกับที่อินสแตนซ์ Vue มีข้อมูลและวิธีการส่วนประกอบก็แชร์เหมือนกัน ดังนั้นเราจะขยายรหัสซึ่งเราได้เห็นข้อมูลและวิธีการแล้ว

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

ใน .jsไฟล์ด้านบนเราได้เพิ่มข้อมูลที่เป็นฟังก์ชันซึ่งส่งคืนวัตถุ วัตถุมีคุณสมบัติชื่อซึ่งกำหนดค่า 'Ria' สิ่งนี้ใช้ในเทมเพลตต่อไปนี้

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

แม้ว่าจะมีข้อมูลเป็นฟังก์ชันในส่วนประกอบ แต่เราสามารถใช้คุณสมบัติของมันได้เช่นเดียวกับที่เราใช้กับอินสแตนซ์ Vue โดยตรง นอกจากนี้ยังมีสองวิธีที่เพิ่มชื่อเปลี่ยนชื่อและชื่อเดิม ใน changename เรากำลังเปลี่ยนคุณสมบัติของชื่อและในชื่อเดิมเรากำลังรีเซ็ตกลับเป็นชื่อเดิม

นอกจากนี้เรายังได้เพิ่มสองเหตุการณ์ใน div, mouseover และ mouseout รายละเอียดของเหตุการณ์จะกล่าวถึงในบทเหตุการณ์ ดังนั้นในตอนนี้ให้วางเมาส์เหนือการโทรchangename วิธีการและการเรียก mouseout originalname วิธี.

การแสดงผลเดียวกันจะแสดงในเบราว์เซอร์ต่อไปนี้

ดังที่เห็นในเบราว์เซอร์ด้านบนจะแสดงชื่อที่กำหนดในคุณสมบัติข้อมูลซึ่งเป็นชื่อเดียวกัน เราได้กำหนดเหตุการณ์การวางเมาส์บน div และเมาส์เอาท์ด้วย มาดูกันว่าจะเกิดอะไรขึ้นเมื่อเราวางเมาส์เหนือและวางเมาส์

เมื่อวางเมาส์เราจะเห็นชื่อขององค์ประกอบแรกเปลี่ยนเป็นเบ็นอย่างไรก็ตามส่วนที่สองยังคงเหมือนเดิม เนื่องจากส่วนประกอบข้อมูลเป็นฟังก์ชันและส่งคืนวัตถุ ดังนั้นเมื่อมีการเปลี่ยนแปลงในที่เดียวสิ่งเดียวกันนี้จะไม่ถูกเขียนทับในกรณีอื่น ๆ

ส่วนประกอบแบบไดนามิก

ส่วนประกอบแบบไดนามิกถูกสร้างขึ้นโดยใช้คีย์เวิร์ด <component></component> และถูกผูกไว้โดยใช้คุณสมบัติดังที่แสดงในตัวอย่างต่อไปนี้

ตัวอย่าง

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

เอาต์พุต

องค์ประกอบแบบไดนามิกถูกสร้างขึ้นโดยใช้ไวยากรณ์ต่อไปนี้

<component v-bind:is = "view"></component>

มี v-bind: is =” view” และมีการกำหนดมุมมองค่าให้ มุมมองถูกกำหนดไว้ในอินสแตนซ์ Vue ดังนี้

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

เมื่อดำเนินการแม่แบบ Dynamic Component จะปรากฏในเบราว์เซอร์