這篇文章主要介紹“vue父組件如何調用子組件”，在日常操作中，相信很多人在vue父組件如何調用子組件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue父組件如何調用子組件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

網站制作、建網站找專業網絡公司創新互聯公司:定制網站、模板網站、仿站、微信平臺小程序開發、軟件開發、app軟件定制開發等。做網站價格咨詢創新互聯公司:服務完善、10余年建站、值得信賴!網站制作電話：18980820575

調用方法：1、在父組件中，通過ref直接調用子組件的方法；2、在父組件中，通過組件的“$emit”、“$on”方法來調用。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue項目中如何在父組件中直接調用子組件的方法：

方案一：通過ref直接調用子組件的方法；

//父組件中

<template>
    <div>
        <Button @click="handleClick">點擊調用子組件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>


//子組件中

<template>
  <div>我是子組件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log('我是子組件的方法');
    },
  },
};
</script>

方案二：通過組件的$emit、$on方法；

//父組件中

<template>
    <div>
        <Button @click="handleClick">點擊調用子組件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子組件$on中的名字
        },
    },
}
</script>

//子組件中

<template>
    <div>我是子組件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子組件方法');
            });
        });
     },
};
</script>

到此，關于“vue父組件如何調用子組件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

當前文章：vue父組件如何調用子組件
分享網址：http://www.yijiale78.com/article42/joojhc.html

成都網站建設公司_創新互聯，為您提供網站導航、品牌網站制作、網站排名、企業建站、用戶體驗、網站維護

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯