vue中父組件如何調(diào)用子組件中的方法

  • 開發(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容