vue.js中父組件調用子組件的內(nèi)部方法示例
更新時間:2017年10月22日 09:55:16 作者:SuperBinlin
這篇文章主要給大家介紹了關于vue.js中父組件調用子組件內(nèi)部方法的相關資料,文中給出來了詳細的示例代碼供大家參考學習,對大家的學習或者工作具有一定的參考價值,需要的朋友們下面隨著小編來一起學習學習吧。
前言
今天同事問了一個問題,他在用iview開發(fā)時,需要用到iview一個組件的內(nèi)部方法,而這個內(nèi)部方法并沒有暴露出來,這種情況下如何調用組件內(nèi)部方法呢,其實很簡單,舉個栗子🌰
示例代碼
子組件:
<template> <div> child </div> </template> <script> export default { name: "child", props: "someprops", methods: { parentHandleclick(e) { console.log(e) } } } </script>
父組件:
<template> <div> <button @click="clickParent">點擊</button> <child ref="mychild"></child> </div> </template> <script> import Child from './child'; export default { name: "parent", components: { child: Child }, methods: { clickParent() { this.$refs.mychild.parentHandleclick("嘿嘿嘿"); } } } </script>
當然,如果是自己開發(fā)組件時,父組件和子組件有很多方法可以通信~
總結
以上就是這篇文章的全部內(nèi)容了,本文還有許多不足,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
Vue 實現(xiàn)顯示/隱藏層的思路(加全局點擊事件)
這篇文章主要介紹了Vue 實現(xiàn)顯示/隱藏層的思路(加全局點擊事件),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應用的具體需求和頁面間的關系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學跟著小編來看看吧2024-04-04