Vue元件基礎
阿新 • • 發佈：2020-07-31
元件是可複用的Vue例項，且帶有一個名字。
元件是可複用的 Vue 例項, 我們可以把頁面中在多個場景中重複使用的部分抽出為一個元件進行復用。元件大大提高了程式碼的複用率。
元件的註冊
全域性元件註冊
可以通過呼叫Vue.component的方式來定義全域性元件，它接收兩個引數：1.元件名，2.元件屬性物件。
命名：
- 短橫線：
- 駝峰式：
使用駝峰命名元件時，首字母最好以大寫
字母開頭。
屬性物件：元件的屬性物件即為Vue的例項物件屬性。
全域性元件可以在任何其他元件內使用，所以當我們設計的元件需要在不同地方使用的時候，我們應當註冊全域性元件。
// 註冊 // 駝峰命名 Vue.component('MyComponentName', {/* */}) // 短橫線命名 Vue.component('my-component-name', {/* */}) // 使用 <my-component></my-component> // 也可以使用自閉和的方式 <my-component />
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <my-component></my-component> <my-component /> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('myComponent', { template: '<div>Hello ！</div>' }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
我們註冊了一個全域性元件 myComponent，並在 html 內使用兩種方式引用了該元件。
區域性元件註冊
我們也可以在Vue例項選項中註冊區域性元件，這樣元件只能在這個例項中使用。區域性元件的註冊利用Vue例項的components物件屬性，以元件名作為key值，以屬性物件作為value。由於區域性元件只能在當前的Vue例項中使用，所以當我們設計的元件不需要在其他元件內複用時，可以設計為區域性元件。
//註冊 components: { 'MyComponentName': { template: '<div>Hello ！</div>' } } // 使用 <my-component></my-component> // 也可以使用自閉和的方式 <my-component />
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component />
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
components: {
'myComponent': {
template: '<div>Hello ！</div>'
}
}
})
</script>
</html>
元件中的屬性引數
在之前章節我們學習了Vue例項，其實，所有的Vue元件也都是Vue的例項，他們也可以接收同樣的屬性引數，並且有相同的生命週期鉤子。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
//註冊了一個全域性元件 myComponent，並定義了 data 資料、 methods 方法、created 生命週期函式。
Vue.component('myComponent', {
template: '<div><div>{{ count }}</div><button @click="add">新增次數</button></div>',
data() {
return {
count: 10
}
},
methods: {
add() {
this.count = this.count + 1;
}
},
created() {
console.log('元件myComponent：created')
}
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>