# Vue元件
元件(Component)是Vue.js最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。就像是python中封裝一個類，在其他類中可以繼承和呼叫類中的屬性和方法。所有的 Vue 元件同時也都是 Vue 的例項，所以可接受相同的選項物件 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。
## 元件的基本使用
- **全域性元件的使用**
```html
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 將元件名以標籤的形式新增到div中，呼叫元件中的內容 -->
<zujian_all></zujian_all>
</div>
<script>
// 全域性元件通過 Vue.component註冊
Vue.component(
'zujian_all',
{ // template指定元件顯示的html內容
template:'<div>全域性元件</div>',
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
**Vue.component()方法中引數說明**
第一個引數指定元件名
第二引數以 {} 形式傳遞，在裡面指定元件的屬性，template指定元件的要載入的內容
- **區域性元件指定**
```html
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_a={
template:'<div>區域性元件1</div>',
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
- **多個區域性元件的使用**
```html
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_a={
template:'<div>區域性元件1</div>',
};
var zujian_b={
template:'<div>區域性元件2</div>',
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> <zujian_b></zujian_b> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a,
zujian_b
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
- 組間的關係
- 元件中可以通過components巢狀另外的元件,比如可以在元件zujian_a中巢狀元件zujian_b
```html
Vue元件
元件(Component)是Vue.js最強大的功能之一。元件可以擴充套件 HTML 元素，封裝可重用的程式碼。就像是python中封裝一個類，在其他類中可以繼承和呼叫類中的屬性和方法。所有的 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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 將元件名以標籤的形式新增到div中，呼叫元件中的內容 -->
<zujian_all></zujian_all>
</div>
<script>
// 全域性元件通過 Vue.component註冊
Vue.component(
'zujian_all',
{ // template指定元件顯示的html內容
template:'<div>全域性元件</div>',
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
Vue.component()方法中引數說明
第一個引數指定元件名
第二引數以 {} 形式傳遞，在裡面指定元件的屬性，template指定元件的要載入的內容
區域性元件指定
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_a={
template:'<div>區域性元件1</div>',
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
多個區域性元件的使用
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_a={
template:'<div>區域性元件1</div>',
};
var zujian_b={
template:'<div>區域性元件2</div>',
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> <zujian_b></zujian_b> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a,
zujian_b
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
組間的關係
元件中可以通過components巢狀另外的元件,比如可以在元件zujian_a中巢狀元件zujian_b
<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_b={
template:'<div>區域性元件2</div>',
};
var zujian_a={
template:'<div>區域性元件1 <zujian_b></zujian_b> </div>',
components:{
zujian_b
}
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
注意:
如果要進行元件巢狀，則必須先講巢狀的元件定義出來，否則不生效，比如在元件zujian_a中巢狀zujian_b則必須先將zujian_b定義出來<!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">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 區域性元件註冊,定義區域性元件
var zujian_b={
template:'<div>區域性元件2</div>',
};
var zujian_a={
template:'<div>區域性元件1 <zujian_b></zujian_b> </div>',
components:{
zujian_b
}
};
// 全域性元件
Vue.component(
'zujian_all',
{ // 在全域性中呼叫區域性元件
template:'<div>全域性元件 <zujian_a></zujian_a> </div>',
// components 將區域性元件註冊到全域性元件中
components:{
zujian_a
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
```
**注意:**
如果要進行元件巢狀，則必須先講巢狀的元件定義出來，否則不生效，比如在元件zujian_a中巢狀zujian_b則必須先將zujian_b定義出來
更多學習資料可關注:itheimaGZ獲取 |
|