组件
1.组件（component）：是最强大的功能之一
2.组件可以扩展HTML 元素 封装可重用的代码
3.组件分为全局组件和局部组件
4.组件之间的传值 ：
（1）父传子，用属性
（2）子传父，用事件
（3）同级传值可以借助第三方
全局组件的基本步骤：
<div id="app">
<my-father></my-father>
</div>
Vue.component('my-father',{
template:` `,
data:function(){
return{
}
}
})
new Vue({
el:'#app'
})
局部组件:
<div id="app">
<my-father></my-father>
</div>
new Vue({
el:'#app',
components:{
'my-father':{
template:``
}
}
})
父传子的例子：
<div id="app">
<my-father></my-father>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<div>
<h2>我是父亲</h2>
<my-son v-bind:message="msg"></my-son>
</div>
`,
data:function(){
return{
msg:'sndkjnsdnkasd'
}
}
})
Vue.component('my-son',{
props:['message'],
template:`
<div>
<h2>我是儿子</h2>
<p>{{message}}</p>
</div>
`
})
new Vue({
el:'#app'
})
</script>
生成的效果图
无标题.png
子传父案列;
<div id="app">
<my-father></my-father>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<div>
<h1>传来的是{{mess}}</h1>
<my-child @send="r"></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
r:function(t){
this.mess=t
}
}
});
Vue.component('my-child',{
template:`<div>
<input type="text" placeholder="" v-model='msg'>
<button @click="s">传上级</button>
</div>
`,
data:function(){
return{
msg:'紫肖是傻逼',
txt:''
}
},
methods:{
s:function(){
this.$emit('send',this.msg)
this.msg=this.txt
}
}
});
new Vue({
el:'#app'
})
</script>
生成的效果图
无标题.png
组件完成的添加列表
<div id="app">
<my-father></my-father>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<div>
<input type="text" placeholder="" v-model='txt'>
<button v-on:click="r">添加</button>
<my-son v-bind:f='arr'></my-son>
</div>
`,
data:function(){
return{
arr:['吃饭', '睡觉', '打多多'],
txt:''
}
},
methods:{
r:function(){
this.arr.push(this.txt);
this.txt=''
}
}
})
Vue.component('my-son',{
props:['f'],
template:`
<ul>
<li v-for="(value,index) in f">{{value}}
<button v-on:click='delt(index)'>删除</button></li>
</ul>
`, methods:{
delt:function(ind){
this.f.splice(ind,1)
}
}
})
new Vue({
el:'#app'
})
</script>
生成的效果图
无标题.png
组件完成的购物车
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<div id="app">
<my-father></my-father>
</div>
<script src="dist/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<my-son v-bind:f="arr"></my-son>
`,
data:function(){
return{
arr:[
{name:'香蕉',price:1,num:1,zong:1},
{name:'苹果',price:2,num:2,zong:4},
{name:'鸭梨',price:3,num:3,zong:9}
]
}
}
});
Vue.component('my-son',{
props:['f'],
template:`
<div>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in f">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td><button v-on:click="jian(index)">-</button>{{value.num}}<button v-on:click="jia(index)">+</button></td>
<td>{{value.zong}}</td>
</tr>
<tr>
<td colspan="5">总计:{{arrs}}</td>
</tr>
</tbody>
</table>
</div>
`,
data:function(){
return{
arrs:0
}
},
methods:{
jian:function(ind){
if(this.f[ind].num==0){
this.num=0;
this.f[ind].zong=this.f[ind].num*this.f[ind].price;
}else {
this.f[ind].num--;
this.f[ind].zong=this.f[ind].num*this.f[ind].price;
this.total();
}
},
jia:function(ind){
this.f[ind].num++;
this.f[ind].zong=this.f[ind].num*this.f[ind].price;
this.total();
},
total:function(){
for(var i=0,tota=0;i<this.f.length;i++){
tota+=this.f[i].zong
}
this.arrs=tota
}
}
});
new Vue({
el:'#app'
})
</script>
生成的效果图
无标题.png
非父子传值案列
<div id="app">
<qe></qe>
<we></we>
</div>
<script src="dist/vue.js"></script>
<script>
var bus=new Vue();
Vue.component('qe',{
template:`
<div>
<h1>我是qe</h1>
<button @click="a">给w</button>
</div>
`,
data:function(){
return{
msg:'hallo vue'
}
},
methods:{
a:function(){
bus.$emit('send',this.msg)
}
}
})
Vue.component('we',{
template:`
<div>
<h1>我是we</h1>
<a href="">{{mess}}</a>
</div>
`,
data:function(){
return{
mess:''
}
},
mounted:function(){
bus.$on('send',msg=>{//箭头函数
this.mess=msg
})
}
})
new Vue({
el:'#app'
})
</script>
点击按钮传出hello vue
无标题.png
网友评论