01 vue子元件調用父元件中的方法

vue子元件，調用父元件中有三種方法哈！下面我們一起來講解。

第一種使用直接在子元件中通過this.$parent.父元件中的方法。來調用父元件的方法

第一種的缺點是不能夠傳遞參數哈。它隻能夠調用方法。

子元件.vue
<template>
    <div @click="fa">
        我是子元件
    </div>
</template>

<script>
    export default {
        methods:{
            fa(){
                // 第一種 直接在子元件中通過this.$parent.父元件中的方法  來調用父元件的方法
               this.$parent.fatherMethod('op');//父元件中有這一個方法fatherMethod     
            }
        }
    }
</script>

父元件.vue
 methods:{
            fatherMethod(){
                console.log("被子元件觸發了")
            }
 }

第二種

方法是在子元件裡用$emit向父元件觸發一個事件，父元件監聽這個事件就行了可以傳遞參數

第三種

子元件.vue
<template>
    <div @click="mychild()">
        我是子元件
    </div>
</template>

<script>
    export default {
        props: {
            say: {
                type: Function,
                default: null
            }
        },
        methods:{
                // 第三種是父元件把方法傳入子元件中，在子元件裡直接調用這個方法
                mychild(){
                    if (this.say) {
                        this.say();
                    }
                }
        }
    }
</script>

父元件
<zidiaoyongfa :say="say"></zidiaoyongfa>

 say(){
      console.log("haha  我要說話")
  }

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。