一.組件的簡單介紹
組件（Component）是 Vue.js 最強(qiáng)大的功能之一婆瓜。
組件可以擴(kuò)展 HTML 元素快集，封裝可重用的代碼。
二. 全局組件廉白、局部組件
例子：
QQ圖片20180918143603.png
html代碼：
<div class="add">
<my-component></my-component>
</div>
js 代碼：
// 全局組件
<script src="vue.js"></script>
<script>
Vue.component('my-component',{
template:`
<div>
<h1>這是我的第一個組件</h1>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</div>
`
})
</script>
// 局部組件
<script src="vue.js"></script>
<script>
new Vue({
el:".add",
date:{},
// 局部組件
components:{
'my-component':{
template:`
<div>
<h1>這是我的第一個組件</h1>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</div>
`
}
}
})
</script>
1个初、組件做的小案例
效果圖：
0918145205.png
html代碼：
<div class="app">
<my-componcent></my-componcent>
</div>
js 代碼：
<script src="vue.js"></script>
<script>
Vue.component('my-componcent',{
template:`
<div>
<h1>{{mas}}</h1>
<button @click="ale">點(diǎn)擊按鈕</button>
<my></my>
</div>
`,
data:function(){
return {
mas:"這是組件2"
}
},
methods:{
ale:function(){
alert('1111111111')
}
}
})
Vue.component('my',{
template:`
<div>
<h1>組件標(biāo)簽可以嵌套</h1>
</div>
`})
new Vue({
el:".app",
data:{}
})
</script>
三 .prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。父組件的數(shù)據(jù)需要通過 props 把數(shù)據(jù)傳給子組件猴蹂，子組件需要顯式地用 props 選項聲明 "prop"
例子：
html：
<div class="app">
<father></father>
</div>
js：
<script src="vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<h1>這是父元素</h1>
<clid v-bind:number="num"></clid>
<button @click="ale">點(diǎn)擊加1</button>
</div>
`,
data:function(){
return{
num:1
}
},
methods:{
ale:function(){
this.num++
}
}
})
Vue.component('clid',{
props:['number'],
template:`
<div>
<h3>這是子元素</h3>
<a href="#">{{number}}</a>
</div>
`
})
new Vue({
el:".app",
})
</script>
80918150137.png
小練習(xí) 水果列表：
效果圖：
8150652.png
html 代碼：
<div id='app'>
<cont></cont>
</div>
js代碼：
<script src='./vue.js'></script>
<script>
Vue.component('cont',{
template:`
<div>
<h1>這是父元素</h1>
<top-title v-bind:fruTit='tit'></top-title>
<list v-bind:fruList='fruit'></list>
</div>
`,
data:function(){
return{
fruit:['apple','pear','banana'],
tit:'水果列表'
}
}
})
//子組件1
Vue.component('top-title',{
props:['fruTit'],
template:`
<h3>{{fruTit}}</h3>
`
})
//子組件
Vue.component('list',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
簡單的增加刪除水果
效果圖：
18151106.png
html代碼：
<div id='app'>
<my-component></my-component>
</div>
js代碼：
<script src='vue.js'></script>
<script>
Vue.component("my-component",{
template:`
<div>
<input type='text' v-model='list'>
<button @click='add'>添加</button>
<my-child v-bind:fruit='fruList'></my-child>
</div>
`,
methods:{
add:function(){
this.fruList.push(this.list);
this.list=''
}
},
data:function(){
return{
fruList:['apple','pear','banana'],
list:''
}
}
})
Vue.component('my-child',{
props:['fruit'],
template:`
<ul>
<li v-for="(value,index) in fruit">
{{value}}
<button @click='delt(index)'>刪除</button>
</li>
</ul>
`,
methods:{
delt:function(ind){
this.fruit.splice(ind,1)
}
}
})
new Vue({
el:'#app'
})
</script>