组件（component）：是vue最强大的功能之一，组件化开发可以扩展 HTML元素，封装可重用代码
组件之间的传值：父传子 用属性传，子传父 用事件传 $emit
1.用组件做的一个弹出效果
HTML部分
<div id='app'>
<my-component></my-component>
</div>
JS部分
<script>
Vue.component("my-component", {
template: `
<div>
<button @click='alt'>按钮</button>
</div>
`,
data: function() {
return {
msg: ''
}
},
methods: {
alt: function() {
alert(11111)
}
}
})
new Vue({
el: '#app',
})
</script>
2.做的一个水果列表效果
HTML部分
<div id='app'>
<my-father></my-father>
</div>
JS部分
<script>
Vue.component("my-father", {
template: `
<div>
<my-son v-bind:tit='title'></my-son>
<my-list v-bind:fruit='arr'></my-list>
</div>
`,
data: function() {
return {
arr: ['apple', 'pear', 'orange'],
title: '水果列表'
}
}
})
//title
Vue.component('my-son', {
props: ['tit'],
template: `
<h2>{{tit}}</h2>
`
})
//arr
Vue.component('my-list', {
props: ['fruit'],
template: `
<ul>
<li v-for="value in fruit">{{value}}</li>
</ul>
`
})
new Vue({
el: '#app'
})
</script>
3.做的一个添加删除效果
HTML部分
<div class="itany">
<mm></mm>
</div>
JS部分
<script>
Vue.component('mm', {
template: `
<div>
<input v-model='tet'></input>
<button @click='add'>添加</button>
<tt v-bind:vv='arr' ></tt>
</div>
`,
data: function() {
return {
arr: ['a', 'b', 'c'],
tet: ''
}
},
methods: {
add: function() {
this.arr.push(this.tet),
this.tet = ''
},
}
})
Vue.component('tt', {
props: ['vv'],
template: `
<div>
<ul>
<li v-for='(val,index) in vv'>
{{val}}
<button @click='sc(index)'>删除</button>
</li>
</ul>
</div>
`,
methods: {
sc: function(ind) {
this.vv.splice(ind, 1)
}
}
})
new Vue({
el: '.itany'
})
</script>
4.做的一个购物车效果
HTML部分
<div class="itany">
<tab></tab>
</div>
JS部分
<script>
Vue.component('tab', {
template: `
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th class='text-center'>编号</th>
<th class='text-center'>名称</th>
<th class='text-center'>单价</th>
<th class='text-center'>数量</th>
<th class='text-center'>小计</th>
</tr>
</thead>
<bi v-bind:vv='filters'></bi>
</table>
</div>
`,
data: function() {
return {
filters: [{
name: 'a',
suu: 2,
sun: 3,
num: 6
},
{
name: 'b',
suu: 3,
sun: 3,
num: 9
},
{
name: 'c',
suu: 4,
sun: 3,
num: 12
}
]
}
}
})
Vue.component('bi', {
props: ['vv'],
template: `
<tbody>
<tr v-for="(val,index) in vv">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.suu}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{val.sun}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{val.num}}</td>
</tr>
<tr>
<td colspan=5>总价:{{sum}}</td>
</tr>
</tbody>
`,
data: function() {
return {
sum: 0
}
},
methods: {
add: function(ind) {
this.vv[ind].sun++
this.vv[ind].num = this.vv[ind].suu * this.vv[ind].sun
this.sumjia()
},
redu: function(ind) {
if(this.vv[ind].sun > 1) {
this.vv[ind].sun--
this.vv[ind].num = this.vv[ind].suu * this.vv[ind].sun
this.sumjia()
}
},
sumjia: function() {
for(var i = 0, total = 0; i < this.vv.length; i++) {
total += this.vv[i].num;
}
this.sum = total;
}
}
})
new Vue({
el: '.itany'
})
</script>
5.做的一个点击显示效果
HTML部分
<div class="itany">
<my-father></my-father>
</div>
JS部分
<script>
Vue.component('my-father', {
template: `
<div>
<h1>这是父组件</h1>
<p>{{txt}}</p>
<input type='text' v-model='txt'>
<my-child @ss='xs'></my-child>
</div>
`,
data: function() {
return {
txt: ''
}
},
methods: {
xs: function(tet) {
this.txt = tet
}
}
})
Vue.component('my-child', {
template: `
<button @click='add'>向父组件传递参数</button>
`,
data: function() {
return {
}
},
methods: {
add: function() {
this.$emit('ss', this.txt)
}
}
})
new Vue({
el: '.itany'
})
</script>
网友评论