qwq 前兩天看了下vue，父子組件方法的調用，怕忘記，所以做個小記錄。
一.父組件調用子組件的方法
1.父組件
<template>
<div id="rightmenu8">
<rightmenu7 ref="rightmenu7"></rightmenu7> // ref要放在組件上
<button @click="parent1">+</button>
<button @click="parent2">-</button>
<span>{{age}}</span>
</div>
</template>
<script>
import rightmenu7 from "./RightMenu7.vue";//引入子組件
export default {
name: "rightmenu8",
data() {
return {
age:18
}
},
methods: {
parent1(){ //調用子組件的方法
this.$refs.rightmenu7.add();// add子組件方法
},
parent2(){
this.$refs.rightmenu7.miute(); //miute子組件方法
}
},
components: {//注冊子組件
rightmenu7: rightmenu7
}
};
</script>
2子組件
<template>
<div id="rightmenu7" >
<span>{{wendu}}℃</span>
<span>{{chuanyi}}</span>
</div>
</template>
<script>
export default {
name:"rightmenu7",
data(){
return{
wendu:17,
chuanyi:'長袖衫'
}
},
methods:{
add(){
this.wendu+=2;
},miute(){
this.wendu-=2;
}
},
watch:{ //實時監控wendu值變化
wendu(newData,oldData){
if(newData<17){
this.chuanyi="棉襖"
}else if(newData==17){
this.chuanyi="長袖衫"
}else{
this.chuanyi="大褲衩";
}
}
}
}
</script>
<style>
</style>