vue中的元件化
阿新 • • 發佈：2018-12-15
元件化
1、定義全域性元件
1、要在父例項中使用某個元件，元件必須在例項值之前定義
2、元件其實也是一個Vue例項，因此它在定義時也會接收：data、methond、生命週期函式等
3、不同的元件不會與頁面的元素繫結，否則就無法複用了因此也沒有el屬性
4、元件渲染需要html模板，所以增加了template屬性，值就是HTML模板，模板的內容必須由html雙標記包裹
5、全域性元件定義完畢，任何vue例項都可以直接在html中通過元件名稱來使用元件了
6、data定義方式比較特殊，必須是一個函式
1 <!DOCTYPE html> 2 <html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>全域性元件</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--使用定義好的全域性元件--> 10 <counter></counter> 11 <counter></counter> 12 </div> 13 </body> 1415 <script src="./node_modules/vue/dist/vue.js"></script> 16 <script> 17 // 定義全域性元件，兩個引數：1、元件名詞 2、元件引數 18 Vue.component("counter",{ 19 template:`<button v-on:click="count++">你點了我{{count}}下</button>`, 20 data(){ 21 return{ 22 count:0 23 } 24 } 25 }); 26 var app = new Vue({ 27 el:"#app" 28 }); 29 </script> 30 </html>
2、元件的複用
定義好的元件可以任意複用多次
<div id="app">
<!--使用定義好的全域性元件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
3.區域性註冊
一旦全域性註冊，就意味著即便你以後不再使用這個元件，它依然會隨著Vue的載入而載入，因此，對於
一些並不頻繁使用的的元件，我們採用區域性註冊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>區域性元件</title>
</head>
<body>
<div id="app">
<increase></increase>
<br>
<increase></increase>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const increase = {
template:`<button v-on:click="count++">點我加{{count}}</button>`,
data(){
return{
count:0
}
}
};
var app = new Vue({
el:"#app",
components:{
increase: increase //將定義的物件註冊為元件
/*
* components就是當前vue物件子元件集合
其中key就是子元件名稱
其值就是元件物件的屬性
* */
}
});
</script>
</body>
</html>
4、元件的通訊
4.1 父向子簡單通訊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>父向子通訊</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h1>大家好，給大家介紹一下</h1> 10 <!--使用子元件，同時傳遞title屬性--> 11 <sun title="我來自火星"></sun> 12 </div> 13 <script src="./node_modules/vue/dist/vue.js"></script> 14 <script> 15 Vue.component("sun",{ 16 //直接使用props接收到的屬性來渲染頁面 17 template:`<h1>{{title}}</h1>`, 18 props:['title'] //通過props來接收一個父元件傳遞的屬性 19 }); 20 21 var app = new Vue({ 22 el:"#app" 23 }); 24 </script> 25 </body> 26 </html>
4.2 父向子複雜通訊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>父向子複雜的通訊</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h2>我喜歡這些語言：</h2> 10 <!--使用子元件的同時，傳遞屬性，這裡使用了v-bind，指向了父元件自己的屬性，language--> 11 <my-list :items="language"/> 12 </div> 13 <script src="./node_modules/vue/dist/vue.js"></script> 14 <script> 15 //定義一個子元件 16 let myList = { 17 template:`<ul> 18 <li v-for="item in items" :key="item.id">{{item.id}}:{{item.name}}</li> 19 </ul>`, 20 props:{ 21 items:{ 22 type:Array, //限定父元件傳遞來的必須是陣列，否則報錯 23 default:[] //預設值 24 } 25 } 26 }; 27 var app = new Vue({ 28 el:"#app", 29 components:{ 30 myList //當key和value一樣時，可以只寫一個 31 }, 32 data:{ 33 language:[ 34 {id:1,name:'Java'}, 35 {id:2,name:'JavaScript'}, 36 {id:3,name:'C語言'}, 37 {id:4,name:"Python"} 38 ] 39 } 40 }); 41 </script> 42 </body> 43 </html>
4.3 子向父通訊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子向父通訊</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h2>num: {{num}}</h2> 10 <!--使用子元件的時候，傳遞num到子元件中--> 11 <!--通過v-on指令將父元件的函式繫結到子元件上--> 12 <counter :num="num" @inc="increase" @dec="decrease"></counter> 13 </div> 14 <script src="./node_modules/vue/dist/vue.js"></script> 15 <script> 16 Vue.component("counter",{ 17 //定義元件，定義兩個按鈕，點選數字num或加或減 18 template:`<div> 19 <button @click="plus">+</button> 20 <button @click="reduce">-</button> 21 </div>`, 22 //當子元件中的按鈕被點選時，呼叫繫結的函式 23 methods:{ 24 plus(){ 25 this.$emit("inc"); //vue提供的內建的this.$emit函式，用來呼叫父元件繫結的函式 26 }, 27 reduce(){ 28 this.$emit("dec"); 29 } 30 } 31 }); 32 var app = new Vue({ 33 el:"#app", 34 data:{ 35 num:0 36 }, 37 methods:{//父元件定義操作num的方法 38 increase(){ 39 this.num ++; 40 }, 41 decrease(){ 42 this.num --; 43 } 44 } 45 }); 46 </script> 47 </body> 48 </html>