vue 父組件中調(diào)用子組件函數(shù)的方法

更新時(shí)間：2019年06月06日 16:52:22 作者：\指間執(zhí)念/

這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

在父組件中調(diào)用子組件的方法：

1.給子組件定義一個(gè)ref屬性。eg:ref="childItem"

2.在子組件的methods中聲明一個(gè)函數(shù)。eg: useInPar:function (str) {console.log(str)}

2. 在父組件的中聲明一個(gè)函數(shù)，并通過this.$refs.childItem.userInPar來使用子組件中聲明的函數(shù)。

父組件：

<template>
 <child-item ref='child' />
  <button @click='useChildFun'></button>
 </template>
 <script>
  ```
 methods() {
    useChildFun:function(){
      this.$refs.child.usedInPar('調(diào)用子組件中的方法');
   }
}
 </script>

子組件：

 ```
 methods () {
  usedInPar(str){
   console.log(str);
  }
 }

沒有完整的代碼，只有一個(gè)用法

總結(jié)

以上所述是小編給大家介紹的vue 父組件中調(diào)用子組件函數(shù)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題
這篇文章主要介紹了解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue中的插槽Slot技術(shù)詳解
插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們?cè)诮M件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽,下面我們就來看看這三種方式的具體使用吧
2023-09-09
詳解用vue.js和laravel實(shí)現(xiàn)微信支付
本篇文章主要介紹了用vue.js和laravel實(shí)現(xiàn)微信支付，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
Vue3+Ts實(shí)現(xiàn)緩存功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3+Ts如何實(shí)現(xiàn)緩存,用戶搜索詞本地排名,延遲消費(fèi)或者消息隊(duì)列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下
2024-03-03
vue是一個(gè)單頁應(yīng)用，輕量，并且不會(huì)重復(fù)下載數(shù)據(jù)。當(dāng)它從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面時(shí)，原來的頁面的vue實(shí)例和相關(guān)數(shù)據(jù)已經(jīng)銷毀了，要實(shí)現(xiàn)逆?zhèn)髦稻鸵业讲僮鞯膶?duì)象及它的一些屬性
2017-11-11