testzm0476
/
vue222
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changes

This commit is contained in:
Code12121 2022-11-02 19:21:30 +08:00
parent 249bc9824d
commit 1333e767f1
2 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/练习计数器.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<apps :new_apps="count"></apps>
<button @click="add()">+</button>
<button @click="rev()">-</button>
</div>
<template id="tpl">
<div>
<h1>{{new_apps}}</h1>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
count:0
},
methods: {
add(){
this.count+=1
},
rev(){
this.count-=1
}
},
components:{
'apps':{
template:"#tpl",
props:{
'new_apps': {
type: Number,
default() {
return 0
}
}
}
}
}
})
</script>
</html>

53
10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/练习计数器.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{data_num}}</h1>
<apps @item="shower"></apps>
</div>
<template id="tpl">
<div>
<button @click="add()">+</button>
<button @click="rev()">-</button>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
data_num:0
},
methods: {
shower(val){
this.data_num=val
}
},
components:{
'apps':{
template:"#tpl",
data(){
return {num:0}
},
methods: {
add(){
this.num+=1
this.$emit("item",this.num)
},
rev(){
this.num-=1
this.$emit("item",this.num)
}
},
}
}
})
</script>
</html>