1，组件(component): 是vue最强大的功能之一 组件化开发 组件可以扩展 HTML 元素，封装可重用的代码。全局 局部
2，组件之间的传值
父传子 用属性传
子传父 用事件传
同级之间传值
1父传子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<one></one>
</div>
<script>
Vue.component("one", {
template: `
<div>
<zhang v-bind:xin='arrs'></zhang>
<chong v-bind:xin1='arr'></chong>
</div>
`,
data: function() {
return {
arr: ['苹果', '橘子', '葡萄'],
arrs: '水果列表'
}
}
})
Vue.component('zhang', {
props: ['xin'],
template: `
<h2>{{xin}}</h2>
`
})
Vue.component('chong', {
props: ['xin1'],
template: `
<ul>
<li v-for='value in xin1'>{{value}}</li>
</ul>
`
})
new Vue({
el: '#box'
})
</script>
</body>
</html>
2父传子做的一个添加删除效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<zhang></zhang>
</div>
<script>
Vue.component('zhang',{
template:`
<div>
<input v-model='arrs'></input>
<button v-on:click='add'>添加</button>
<zhang1 v-bind:xin='arr'></zhang1>
</div>
`,
data:function(){
return{
arr:['苹果','西瓜','香蕉'],
arrs:''
}
},
methods:{
add:function(){
this.arr.push(this.arrs),
this.arrs=''
}
}
})
Vue.component('zhang1',{
props:['xin']
,template:`
<ul>
<li v-for='(value,index) in xin'>{{value}}
<button v-on:click='add(index)'>删除</button>
</li>
</ul>
`,
methods:{
add:function(ind){
this.xin.splice(ind,1)
}
}
})
new Vue({
el:'#box'
})
</script>
</body>
</html>
3，父传子做的一个购物车效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<zhang></zhang>
</div>
<script>
Vue.component('zhang', {
template: `
<table border="1" cellspacing="0" cellpadding="" style="width: 500px; margin: 0 auto; text-align: center;">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<zhang1 v-bind:xin='arr'></zhang1>
</table>
`,
data: function() {
return {
arr: [{
name1: '苹果',
name2: 2,
name3: 2,
name4: 4
},
{
name1: '西瓜',
name2: 3,
name3: 3,
name4: 9
},
{
name1: '葡萄',
name2: 4,
name3: 4,
name4: 16
}
]
}
}
})
Vue.component('zhang1', {
props: ['xin'],
template: `
<tbody>
<tr v-for="(value,index) in xin">
<td>{{index+1}}</td>
<td>{{value.name1}}</td>
<td>{{value.name2}}</td>
<td>
<button v-on:click='add(index)'>+</button>
{{value.name3}}
<button v-on:click='app(index)'>-</button>
</td>
<td>{{value.name4}}</td>
</tr>
<tr>
<td colspan=5>总价:{{sum}}</td>
</tr>
</tbody>
`,
data: function() {
return {
sum: 0
}
},
methods: {
add: function(ind) {
this.xin[ind].name3++;
this.xin[ind].name4 = this.xin[ind].name3 * this.xin[ind].name2;
this.apd()
},
app: function(ind) {
if(this.xin[ind].name3 > 1) {
this.xin[ind].name3--
}
this.xin[ind].name4 = this.xin[ind].name3 * this.xin[ind].name2
this.apd()
},
apd: function() {
for(var i = 0, zong=0; i < this.xin.length; i++) {
zong+=this.xin[i].name4
}
this.sum=zong;
}
}
})
new Vue({
el: '#box'
})
</script>
</body>
</html>
子传父：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div>
<h1>{{mess}}</h1>
<my-child @add='app'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
app:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:`
<button @click='sendFather'>给父组件</button>
`,
data:function(){
return{
msg:'hello Vue'
}
},
methods:{
sendFather:function(){
// this.$emit('自定义事件',参数)
this.$emit('add',this.msg)
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
网友评论