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 จะปรากฏในเบราว์เซอร์