一、组件：可以拓展HTML元素，封装可重用的代码
组件分为全局组件和局部组件
通过prop向子组件传递数据
全局组件：
body部分：
<div id="itany">
<my-component></my-component>
</div>
js部分：
<script src="js/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>
</div>
`
})
new Vue({
el:"#itany",
data:{
msg:'hello vue'
}
}
})
</script>
局部组件：
body部分：
<div id="itany">
<my-component></my-component>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:'hello vue'
},
// 局部组件
components:{
'my-component':{
template:`
<div>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
<a href="#">去百度</a>
</div>
`
}
}
})
</script>
二、全局组件和局部组件效果图：
全局组件和局部组件效果图.png
组件可以被嵌套
组件中的data属性必须是一个函数
body部分：
<div id="itany">
<my-component></my-component>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
//组件一
Vue.component("my-component",{
template:`
<div>
<h1>{{msg}}</h1>
<button @click="alt">点击按钮</button>
<my-child></my-child>
</div>
`,
data:function(){
return{
msg:'我是组件一中的内容'
}
},
methods:{
alt:function(){
alert(1111)
}
}
})
//组件二
Vue.component("my-child",{
template:`
<div>
<p>我是组件二</p>
<a href="#">去百度</a>
</div>
`
})
new Vue({
el:"#itany",
})
</script>
三、父给子传值案例props['属性名']
body部分：
<div id="itany">
<father></father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<h3>这是父元素</h3>
<child v-bind:number='num'></child>
<button @click="add">点击加1</button>
</div>
`,
data:function(){
return{
num:1
}
},
methods:{
add:function(){
this.num++
}
}
})
//子组件
Vue.component('child',{
props:['number'],
template:`
<div>
<h5>这是子元素</h5>
<a href="#">{{number}}</a>
</div>
`
})
new Vue({
el:"#itany",
data:{}
})
</script>
父给子传值案例.png
四、添加删除水果列表案例
body部分：
<div id="itany">
<father></father>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
Vue.component('father',{
template:`
<div>
<h1>这是父元素</h1>
<child-one v-bind:lis='arrs'></child-one>
<input type="text" v-model="fruList">
<button @click="add">点击添加</button>
<child-two v-bind:fruit='arr'></child-two>
</div>
`,
data:function(){
return{
arr:['apple','pear','banana','orange','watermelon'],
arrs:'水果列表',
fruList:''
}
},
methods:{
add:function(){
this.arr.push(this.fruList)
this.fruList=''
}
}
})
//子组件一
Vue.component('child-one',{
props:['lis'],
template:`
<h3>{{lis}}</h3>
`
})
// 子组件二
Vue.component('child-two',{
props:['fruit','contro'],
template:`
<ul>
<li v-for="(value,index) in fruit">
{{value}}
<button @click='del(index)'>删除</button>
</li>
</ul>
`,
methods:{
del:function(ind){
this.fruit.splice(ind,1)
}
}
})
new Vue({
el:"#itany",
data:{
}
})
</script>
添加删除水果列表案例.png
