文章目錄
- 一.組件的作用
- 二.使用組件
- 三.全域注冊和區域組注冊
- 四.父組件和子組件
- 五.注冊組件的語法糖寫法
一.組件的作用
我們在開發程序中，會復用許多的代碼，我們不會寫許多重復的代碼，這樣也會使我們的代碼變得很臃腫，我們在c語言的學習程序中，使用到了函式來封裝我們的函式來實作代碼的復用，我們在vue中，可以使用組件來封裝我們的代碼，組件可以使我們很輕易地對我們的代碼進行修改，任何我們所看到的頁面都可以分解成組件，如下：
官方檔案的例子，我們將一個頁面分解為一顆樹，
二.使用組件
創建組件構造器
我們通過Vue.extend()可以創建一個組件構造器，其中上面的（）里面的內容可以認為是一個物件，``在Tab之上，是一個特殊符號，與單引號類似，但是可以不受行的限制，
一個模板物件
注冊組件
注冊語法
其中，tagName為組件名，options為組件配置項，
例子中，'myButton’為組件名，temp為組件配置項，
使用組件
使用語法：
tagName為我們自定義的組件名，
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<!--使用組件-->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type = "text/javascript">
//創建組件構造器
const temp = Vue.extend({
template:
`<h1>
Good Morning
</h1>`
})
//注冊組件
Vue.component('myButton',temp)
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
三.全域注冊和區域組注冊
全域注冊
我們通過Vue.component()注冊的組件為全域組件，它可以在vue的任何實體當中被使用， 語法：
區域注冊
我們在vue實體中注冊的組件為區域組件，它只能被本實體中被使用， 例如：
注意，不是vue實體不能使用任何的vue實體，
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<my-button></my-button>
<my-button></my-button>
<my-button2></my-button2>
</div>
<div id = "app1">
<my-button></my-button>
<!--在這里不能用 <my-button2></my-button2>-->
</div>
<script type = "text/javascript">
const temp = Vue.extend({
template:`
<h2>Welcome to Vue</h2>
`
})
//全域組件
Vue.component('myButton',temp);
const app = new Vue({
el:"#app",
data:{
},
//區域組件
components:{
myButton2:temp
}
})
const app1 = new Vue({
el:"#app1",
})
</script>
</body>
</html>
四.父組件和子組件
如下面的例子，使用組件中的components屬性，就可以在子組件中使用父組件，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<my-button></my-button>
</div>
<script type = "text/javascript">
const tempFather = Vue.extend({
template:
`<h1>
Good Morning
</h1>`
})
const tempSon = Vue.extend({
template:
`<div>
<h1>Good Night</h1>
<temp></temp>
</div>
`,
components:{
temp:tempFather
}
})
const app = new Vue({
el:"#app",
data:{
},
components:{
myButton:tempSon
}
})
</script>
</body>
</html>
五.注冊組件的語法糖寫法
我們以第一個實體為例子：
沒使用語法糖前
使用語法糖后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<!--使用組件-->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type = "text/javascript">
//創建組件構造器
//注冊組件
Vue.component('myButton',{
template:
`<h1>
Good Morning
</h1>`
})
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277682.html
標籤：其他
上一篇：JavaScript web編程