vue從入門到精通之進階篇(二)組件通信:兄弟組件通信

$emit和$on進行組件之間的傳值

注意:emit和emit和emiton的事件必須在一個公共的實例上,才能夠觸發

需求:

? 1.有A,B,C三個組件,同時掛載到入口組件中

? 2.將A組件中的數據傳遞到C組件,再將B組件中的數據傳遞到C組件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Vue2-單一事件管理組件通信</title></head>
<body><div id="app"><dom-a></dom-a><dom-b></dom-b><dom-c></dom-c>   </div><script src="vue.js"></script><script>//準備一個空的實例對象var Event = new Vue();console.log(Event);//組件Avar A = {template: `<div><span>我是A組件的數據->{{a}}</span><input type="button" value="把A數據傳給C" @click = "send"></div>`,methods: {send () {alert(1);console.log(this);Event.$emit("a-msg", this.a);}},data () {return {a: "我是a組件中數據"}}};//組件Bvar B = {template: `<div><span>我是B組件的數據->{{a}}</span><input type="button" value="把B數據傳給C" @click = "send"></div>`,methods: {send () {Event.$emit("b-msg", this.a);}},data () {return {a: "我是b組件中數據"}}};//組件Cvar C = {template: `<div><h3>我是C組件</h3><span>接收過來A的數據為: {{a}}</span><br><span>接收過來B的數據為: {{b}}</span></div>`,mounted () {alert(2);//接收A組件的數據Event.$on("a-msg", (a)=> {this.a = a;});//接收B組件的數據Event.$on("b-msg",  (b)=> {this.b = b;});},data () {return {a: "",b: ""}}};new Vue({el: "#app",components: {'dom-a':A,'dom-b':B,'dom-c':C}});</script></body>
</html>

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

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

相關文章

樹結構的性質

非空樹的結點總數等于樹種所有結點的度之和加 1度為 K 的非空樹的第 i 層最多有 ki-1 個結點(i > 1)深度為 h 的 k 叉樹最多有(kh - 1)/(k - 1)個結點具有 n 個結點的 k 叉樹的最小深度為 logk(n(k-1)1))

EM算法 小結

猴子吃果凍 博客園首頁新隨筆聯系管理訂閱隨筆- 35 文章- 0 評論- 3 4-EM算法原理及利用EM求解GMM參數過程 1.極大似然估計 原理&#xff1a;假設在一個罐子中放著許多白球和黑球&#xff0c;并假定已經知道兩種球的數目之比為1:3但是不知道那種顏色的球多。如果用放回抽樣方…

Vue UI 框架對比 element VS iview

element VS iview (最近項目UI框架在選型 &#xff0c;做了個分析&#xff0c; 不帶有任何利益相關&#xff09; 主要從以下幾個方面來做對比 使用率&#xff08;npm 平均下載頻率&#xff0c;組件數量&#xff0c;star, issue…) API風格 打包優化 與設計師友好性 1&a…

SPSS-回歸分析

回歸分析&#xff08;一元線性回歸分析、多元線性回歸分析、非線性回歸分析、曲線估計、時間序列的曲線估計、含虛擬自變量的回歸分析以及邏輯回歸分析&#xff09; 回歸分析中&#xff0c;一般首先繪制自變量和因變量間的散點圖&#xff0c;然后通過數據在散點圖中的分布特點選…

Python教程:Python中的for 語句

Python 中的 for 語句與你在 C 或 Pascal 中可能用到的有所不同。 Python教程 中的 for 語句并不總是對算術遞增的數值進行迭代&#xff08;如同 Pascal&#xff09;&#xff0c;或是給予用戶定義迭代步驟和暫停條件的能力&#xff08;如同 C&#xff09;&#xff0c;而是對任意…

二叉樹的基本性質及證明

性質1&#xff1a;一棵非空二叉樹的第i層上最多有2^(i-1)個結點&#xff0c;&#xff08;i>1&#xff09;。 性質2&#xff1a;一棵深度為k的二叉樹中&#xff0c;最多具有2^k-1個結點&#xff0c;最少有k個結點。 性質3&#xff1a;對于一棵非空的二叉樹&#xff0c;度為…

ACM10.14題解

ACM10.14題解 第一次打周賽&#xff0c;感覺還是比較緊張的&#xff0c;應該開完所有的題再做&#xff0c;而不是硬做&#xff0c;沒必要硬杠英語&#xff0c;還是不要抱有僥幸心理&#xff0c;做對一定是完全理解且會&#xff0c;自己小心邊界問題&#xff0c;不要瞎交。 A&am…

vscode: Visual Studio Code 常用快捷鍵

原文章地址&#xff1a; vscode: Visual Studio Code 常用快捷鍵 官方快捷鍵說明&#xff1a;Key Bindings for Visual Studio Code 主命令框 F1 或 CtrlShiftP: 打開命令面板。在打開的輸入框內&#xff0c;可以輸入任何命令&#xff0c;例如&#xff1a; 按一下 Backspace…

HTML5概要與新增標簽

一、HTML5概要 1.1、為什么需要HTML5 HTML4陳舊不能滿足日益發展的互聯網需要&#xff0c;特別是移動互聯網。為了增強瀏覽器功能Flash被廣泛使用&#xff0c;但安全與穩定堪憂&#xff0c;不適合在移動端使用&#xff08;耗電、觸摸、不開放&#xff09;。 HTML5增強了瀏覽器的…

Tomcat啟動失敗錯誤解決Could not publish server configuration for Tomcat v8.0 Server at localhost....

這個問題本質是我們有多個重名項目&#xff0c;為什么我們會有多個重名項目&#xff0c;其實一般都是我們刪除以前的項目&#xff0c;然后再把它重新導進eclipse時以前的項目刪除不徹底造成的&#xff0c;以前的項目在"Servers"里面的"server.xml"文件下的…

二叉樹特性及證明

https://blog.csdn.net/jun2016425/article/details/54581407

Mock.js 和Node.js詳細講解

????原文地址&#xff1a;http://www.manongjc.com/article/10503.html 《一統江湖的大前端》系列是自己的前端學習筆記&#xff0c;旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫&#xff0c;不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件&am…

架構圖

負載均衡 分布式 轉載于:https://www.cnblogs.com/jiqing9006/p/10672280.html

網絡操作系統P12頁答案

1.什么是網絡操作系統&#xff1f;網絡操作系統具有哪些基本功能&#xff1f;網絡操作系統&#xff1a;專門為網絡用戶提供操作接口的系統軟件&#xff0c;除了管理計算機的軟件和硬件資源具備單機操作系統&#xff0c;并且為網絡用戶提供各種網絡服務。當然網絡操作系統不僅要…

如何將存儲在MongoDB數據庫中的數據導出到Excel中?

將MongoDB數據庫中的數據導出到Excel中&#xff0c;只需以下幾個步驟&#xff1a; &#xff08;1&#xff09;首先&#xff0c;打開MongoDB安裝目錄下的bin文件夾&#xff0c;&#xff08;C:\Program Files (x86)\MongoDB\Server\3.2\bin&#xff09;&#xff1b;此處視個人安裝…

vue 項目初始化時,npm run dev報錯解決方法

錯誤如下&#xff1a; npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the travel1.0.0 dev script. npm ERR…

JDK源碼分析

https://www.jianshu.com/p/f1f1f14e7fbe

VSCode 初次寫vue項目并一鍵生成.vue模版

1.安裝vscode 官網地址&#xff1a;https://code.visualstudio.com/2.安裝一個插件&#xff0c;識別vue文件 插件庫中搜索Vetur&#xff0c;下圖中的第一個&#xff0c;點擊安裝&#xff0c;安裝完成之后點擊重新加載微信圖片_20180723174649.png 3.新建代碼片段 文件-->…

文本聊天室(TCP-中)

開始我們今天的代碼實現&#xff0c;我們接著上一回&#xff0c;上回實現了服務器的代碼這次實現客戶端的UI(界面)層, 我們界面層采用javafx來進行繪制,首先有個登錄服務器的界面然后切換到聊天界面運行結果如下.源代碼如下: 1 package jffx.blogs.net;2 3 import javafx.appli…

Oracle 查詢庫中所有表名、字段名、字段名說明,查詢表的數據條數、表名、中文表名...

查詢所有表名&#xff1a;select t.table_name from user_tables t;查詢所有字段名&#xff1a;select t.column_name from user_col_comments t;查詢指定表的所有字段名&#xff1a;select t.column_name from user_col_comments t where t.table_name BIZ_DICT_XB;查詢指定表…