埋坑一: vue中子組件調用兄弟組件方法

小計: 開發中遇到子組件需要調用兄弟組件中的方法,如下寫個小demo記錄下心得,如果你有好的方法,請到評論區域指教

父組件示例代碼:

組件功能解析: 通過$emit獲取子組件事件,通過$ref調用子組件中事件,實現子組件二的click事件調用兄弟組件一中的事件
<template><div><!-- 子組件1 --><son1 ref="borther" :dataFromFather="dataFromFather"></son1><!-- 子組件2 --><son2 @triggerBrotherMethods="triggerBrotherMethods" :dataFromFather="dataFromFather"></son2></div>
</template><script>
// 引入子組件一
import son1 from './son1'
// 引入子組件二
import son2 from './son2'export default {data() {return {dataFromFather: []}},// 注冊子組件components: {son1,son2},methods: {// 子組件2中click事件triggerBrotherMethods() {// 父組件通過$ref調用子組件1中的事件方法this.$refs.borther[0].bortherMethods()},}
}
</script><style lang="less" scoped>
/* .... */
</style>

子組件一

組件功能解析: 加載父組件數據,進行業務操作
<template><!-- 子組件son2 --><div @click="bortherMethods"><!-- 父組件傳值展示 -->{{dataFromFather}}</div>
</template><script>
export default {data() {return {}},props: ['dataFromFather'],methods: {// 兄弟組件中的按鈕事件bortherMethods() {// 子組件事件方法...},}
}
</script><style lang="less" scoped>
/* .... */
</style>

子組件二:

組件功能解析: 加載父組件數據,通過click事件emit傳給父組件
<template><!-- 子組件son2 --><div @click="triggerBrotherMethods"><!-- 父組件傳值展示 -->{{dataFromFather}}</div>
</template><script>
export default {data() {return {}},props: ['dataFromFather'],methods: {// 觸發兄弟組件中的按鈕事件triggerBrotherMethods() {this.$emit('clickBrotherBtn', true)},}
}
</script><style lang="less" scoped>
/* .... */
</style>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/538327.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/538327.shtml
英文地址,請注明出處:http://en.pswp.cn/news/538327.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

nioqrc oracle,程序停在?readnocancel?()?from?-lib-tls-libpthread.so.0

程序停在 readnocancel () from -lib-tls-libpthread.so.0(2012-04-10 23:20:56)標簽&#xff1a;程序雜談程序停在 __read_nocancel () from /lib/tls/libpthread.so.0我在 IBMBladeCenter JS21機器 (計算機集群)上 利用 MPI C 編程&#xff0c; 但出現了一些奇怪的現象。那就…

synchronized 方法 導致插入數據插不進_synchronized 原理知多少

本文轉載于SegmentFault社區作者&#xff1a;ytaosynchronized是 Java 編程中的一個重要的關鍵字&#xff0c;也是多線程編程中不可或缺的一員。本文就對它的使用和鎖的一些重要概念進行分析。使用及原理synchronized 是一個重量級鎖&#xff0c;它主要實現同步操作&#xff0c…

SpringMVC源碼解析(四)——請求處理

2019獨角獸企業重金招聘Python工程師標準>>> 前言 這一篇&#xff0c;將著手介紹一次請求的處理。用到了 HandlerMapping、HandlerAdapter 知識&#xff0c;如果遇到不是太了解&#xff0c;可以回顧下。 源碼分析 其實 DispatcherServlet 也只是 Servlet 的一個實現…

oracle中where中使用函數,Oracle 盡量避免在 SQL語句的WHERE子句中使用函數

-- Start在 WHERE 子句中應該盡量避免在列上使用函數&#xff0c;因為這樣做會使該列上的索引失效&#xff0c;影響SQL 語句的性能。即使該列上沒有索引&#xff0c;也應該避免在列上使用函數。考慮下面的情況&#xff1a;CREATE TABLE EMPLOYEE(NAME VARCHAR2(20) NOT NULL,--…

求近似數最值_干貨|初中數學《數的開方》知識點梳理

本章內容課標的要求● 1.了解平方根、算術平方根、立方根的概念&#xff0c;會用根號表示數的平方根、算術平方根、立方根。● 2.了解乘方與開方互為逆運算&#xff0c;會用平方運算求百以內整數的平方根&#xff0c;會用立方運算會求百以內整數(對應的負整數)的立方根&#xf…

第三章(續)

目錄 第二章 灰度變換與空間濾波(續)直方圖處理與函數繪圖生成直方圖直方圖均衡直方圖匹配空間濾波線性空間濾波非線性空間濾波圖像處理工具箱的標準濾波器線性空間濾波器非線性空間濾波器第二章 灰度變換與空間濾波(續) 直方圖處理與函數繪圖 生成直方圖 應用函數 imhist 語法…

Linux Mysql 安裝方法

1、檢查是否有安裝 [rootJDDB mysql]# yum list installed | grep mysql mysql-community-client.x86_64 5.6.39-2.el7 mysql56-community mysql-community-common.x86_64 5.6.39-2.el7 mysql56-community mysql-community…

oracle 經緯度算距離,根據經緯度訣別用java和Oracle存儲過程計算兩點距離

根據經緯度分別用java和Oracle存儲過程計算兩點距離create or replace procedure SP_GET_DISTANCE(cx in number,cy in number,sx in number, sy in number,distance out varchar2)isd number;x number;y number;r number;pi number;begin--開始計算r:6371229;--地球半徑pi:3.1…

Kafka集群安裝--測試--關閉

一、前提 1、kafka安裝包下載&#xff1a;http://kafka.apache.org/downloads 2、jdk已安裝 3、scala已安裝 4、zookeeper集群已安裝并運行二、步驟 1、對kafka_2.9.2-0.8.1.tgz進行解壓縮&#xff1a;tar -zxvf kafka_2.9.2-0.8.1.tgz。2、對kafka目錄進行改名&#xff1a;mv …

Java中的工廠模式

設計模式遵循原則 開閉原則&#xff1a;對擴展開放&#xff0c;對修改關閉里氏代換原則&#xff1a;只有當衍生類可以替換掉基類&#xff0c;軟件單位的功能不受到影響時&#xff0c;基類才能真正被覆用。而衍生類也能夠在基類的基礎上增加新的行為依賴倒轉原則&#xff1a;開閉…

python的底層實現_Python底層封裝實現方法詳解

這篇文章主要介紹了Python底層封裝實現方法詳解,文中通過示例代碼介紹的非常詳細&#xff0c;對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下事實上&#xff0c;python封裝特性的實現純屬“投機取巧”&#xff0c;之所以類對象無法直接調用私有方法和屬性&a…

php 附近的距離,PHP查詢附近的人及其距離的實現方法_PHP

本文實例講述了PHP查詢附近的人及其距離的實現方法。分享給大家供大家參考&#xff0c;具體如下&#xff1a;array(lat>$lat $dlat,lng>$lng-$dlng),right-top>array(lat>$lat $dlat, lng>$lng $dlng),left-bottom>array(lat>$lat - $dlat, lng>$ln…

統計指定目錄下的視頻時長

package time;import java.io.File;import org.apache.log4j.Logger;import it.sauronsoftware.jave.Encoder; import it.sauronsoftware.jave.EncoderException; import it.sauronsoftware.jave.MultimediaInfo;public class Test2 {/* 支持的后綴 */private static final Str…

怎么在cmd中運行python腳本_cmd中運行python腳本智能使用流程

(此時的ScaleMode自動變Vbuser)更有趣的是用來計算字串高、寬的TextHeight/TextWidth也變成以座標0-100的方式來表現了On Error Resume NextSet outstreemWscript.stdoutIf (LCase(Right(Wscript.fullname,11))"Wscript.exe") ThenSet objShellWscript.CreateObject(…

世界時鐘 軟件_Clocker for Mac(世界時鐘軟件)

Clocker for Mac是一款Mac平臺上免費的世界時鐘工具&#xff0c;方便我們查看世界各地的時間&#xff0c;它是開源免費的&#xff0c;完全沒有廣告。包括數百個時區&#xff0c;支持24小時制或AM / PM&#xff0c;macz提供Clocker mac免費版&#xff0c;歡迎前來下載&#xff0…

Mac 設置 NDK

2019獨角獸企業重金招聘Python工程師標準>>> 1、首先查看我自己的android studio &#xff0c;找到以下路徑 如上圖&#xff0c;打開一個 AS 項目&#xff0c;file - project structure 這是我的3 個路徑 Ndk /Users/dhbm/Library/Android/sdk/ndk-bundle Sdk /User…

Workbench has not been created yet

原因是&#xff1a;加載的插件變更后需要清理 在啟動參數最后加入 -clean

oracle必須聲明標識符函數,引用變量時需要必須聲明標識符

SQL> declare2 pname emp.ename%type;3 psal emp.sal%type;4 begin5 select enmae,sal into pname,psal from emp where empno7782;6 dbms_output.put_line(pname||xsis||psal);7 end;8 /pname emp.ename%type;*第 2 行出現錯誤:ORA-06550: 第 2 行, 第 7 列:PLS-002…

四參數擬合曲線_每周放送|曲線擬合

曲線擬合No.1什么是曲線擬合所謂的曲線擬合&#xff0c;就是使用某一個模型(或者稱為方程式)&#xff0c;將一系列的數據擬成平滑的曲線&#xff0c;以便觀察兩組數據之間的內在聯系&#xff0c;了解數據之間的變化趨勢。No.2曲線擬合的應用在數據分析時&#xff0c;我們有時需…

Spark集群運行jar包程序里的print日志哪里去了?

默認情況下&#xff0c;是輸出到stdout里的。 方法一&#xff1a; 進入work所在機器的spark安裝目錄下的work目錄&#xff0c;里面有日志輸出。 方法二&#xff1a; 進入spark web ui 里 點擊stdout就可以查看&#xff0c;如果沒有可能在其他work上。