- 開發(fā)遇到一個問題:頁面中有個對話框,對話框中有
取消和確定兩個按鈕,這應(yīng)該是 父組件中的內(nèi)容,
對話框中的表單是 通過子組件展示的,所以 點擊父組件的內(nèi)容需要調(diào)用子組件中的方法。
- 解決辦法:用 $ref 調(diào)用
// 子組件:
<template>
<div>
</div>
</template>
<script>
export default {
data(){
return {
num:'123'
}
},
computed: {
},
components: {
'children': children
},
methods:{
childMethod() {
alert('childMethod do...')
}
},
created(){
}
}
</script>
// 父組件: 在子組件中加上ref即可通過this.$refs.ref.method調(diào)用
<template>
<div @click="parentMethod">
<children ref="c1"></children>
</div>
</template>
<script>
import children from 'components/children/children.vue'
export default {
data(){
return {
}
},
computed: {
},
components: {
'children': children
},
methods:{
parentMethod() {
console.log(this.$refs.c1) //返回的是一個vue對象,所以可以直接調(diào)用其方法
this.$refs.c1.childMethod();
}
},
created(){
}
}
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。