2. 程式人生 > >vue中通信方式

vue中通信方式

阿新 • • 發佈：2017-07-22
pre 共享 lis items emit var scrip one fun

  • vuex中共享state
  • 父子組件emit/on
  • 跨組件event bus

跨組件eventbus通信

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        <style>
            
        </style>
    </head>
    <body>
        <div id="
 
todo-app">
            <h1>todo app</h1>
            <new-todo></new-todo>
            <todo-list></todo-list>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
    var
 
 eventHub = new Vue({
        data() {
            return{
                todos:[‘A‘,‘B‘,‘C‘]
            }
        },
        created:function () {
            this.$on(‘add‘, this.addTodo)
            this.$on(‘delete‘, this.deleteTodo)
        },
        beforeDestroy:function () {
            this
 
.$off(‘add‘, this.addTodo)
            this.$off(‘delete‘, this.deleteTodo)
        },
        methods: {
            addTodo: function (newTodo) {
                this.todos.push(newTodo)
            },
            deleteTodo: function (i) {this.todos.splice(i,1)
            }
        }
    })
    var newTodo={
        template: ‘<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>‘,
        data() {
            return { 
                newtodo: ‘‘
            }
        },
        methods: {
            add: function(){
                eventHub.$emit(‘add‘,this.newtodo);
                this.newtodo=‘‘;
            }
        }
        
    }
    var todoList = {
        template:`<ul><li v-for="(index,item) in items">{{index}}           <button @click="rm(item)">X</button></li>           </ul>`,
        data(){
          return{
             items:eventHub.todos
          }
        },
        methods:{
          rm:function(i){
              eventHub.$emit(‘delete‘,i)
          }
        }
    }
    var app= new Vue({
        el:‘#todo-app‘,
        components:{
            newTodo:newTodo,
            todoList:todoList
        }    
    })
    
         
    </script>
</html>

vue中通信方式

相關推薦

vue中通信方式

pre 共享 lis items emit var scrip one fun vuex中共享state 父子組件emit/on 跨組件event bus 跨組件eventbus通信 <!DOCTYPE html> <html> <

vue之父子組件之間的通信方式

send 註冊 事件 tle self. 傳遞 scrip image ger （一）props與$emit <!-這部分是一個關於父子組件之間參數傳遞的例子--> <!--父組件傳遞參數到子組件是props，子組件傳遞參數到父組件是用事件觸發$emit

linux進程中的通信方式

一是 數據結構 信息 受限 soc 間接 mes 標識 通信機制 進程的概念 進程是操作系統的概念，每當我們執行一個程序時，對於操作系統來講就創建了一個進程,在這個過程中，伴隨著資源的分配和釋放。可以認為進程是一個程序的一次執行過程。 進程通信的概念 進程用戶空間是相

vue的三種通信方式

spa method 三種 接收數據 ont 對象 s函數 事件 cli 一 確定組件關系二 使用第一步確定的組件關系在下面找到使用方法 1 父子通信（子組件使用父組件數據渲染） a) 在 子組件 中添加props props: [自定義prop名字] b) 在子組件中

[OS] Linux進程、線程通信方式總結

信號量 all http 命名 信號 .com 數據結構 rem pip 轉自：http://blog.sina.com.cn/s/blog_64b9c6850100ub80.html Linux系統中的進程通信方式主要以下幾種: 同一主機上的進程通信方式 * UNI

多進程間通信方式和多線程同步機制總結

post msd 阻塞 ng- div 文件映射 管理 線程 -m 多進程之間通信方式： 文件映射：本地之間 共享內存：本地之間 匿名管道：本地之間 命名管道：跨服務器 郵

進程間的通信方式

進程 信號 管道 # 管道( pipe )：管道是一種半雙工的通信方式，數據只能單向流動，而且只能在具有親緣關系的進程間使用。進程的親緣關系通常是指父子進程關系。# 有名管道 (named pipe) ： 有名管道也是半雙工的通信方式，但是它允許無親緣關系進程間的通信。# 信號量( semopho

線程間的通信、同步方式與進程間通信方式

結果 全局變量 應用程序 聲明 是否 請求 bsp 方式 可能 1.線程間的通信方式 1)使用全局變量(由於多個線程可能更改全局變量,因此全局變量最好聲明為volatile) 2) 使用消息實現通信 3)使用事件CEvent類實現線程間的通信 2.同步/異步(C端) 同步

IIC SPI UART通信方式的區別

時鐘 復雜 sheng net 主機 發送 並行 mos ont 1.定義上的區別 IIC :Inter-Integrated Circuit 　　 兩線式串行總線 SPI : serial peripheral interface 串行外圍設備接口 UART : U

Tuxedo：Tuxedo支持的分布式通信方式

分享圖片 gpo ice clas con 方式 9.png body 中間 1、RPC：用於遠程方法調用。Java中類似的技術有EJB、WebService 2、Conversaction：交流。Java中類似的有JDBC。 3、Message Notificat

8種進程間通信方式

queue 實現 復雜 字節流 緩沖 防止 因此 事件 n) # 無名管道( pipe )：管道是一種半雙工的通信方式，數據只能單向流動，而且只能在具有親緣關系的進程間使用。進程的親緣關系通常是指父子進程關系。 # 高級管道(popen)：將另一個程序當做一個新的進程在當前

JAVA多線程之線程間的通信方式

關系 strong while nal socket 計數 緩沖 str 進行 線程間的通信方式 ①同步 這裏講的同步是指多個線程通過synchronized關鍵字這種方式來實現線程間的通信。 ②while輪詢的方式 ③wait/notify機制 ④管道通信就是使用java

python全棧開發基礎【第二十一篇】互斥鎖以及進程之間的三種通信方式（IPC）以及生產者個消費者模型

ipc 例子 清空 ase 多個進程 art 並且 star als 一、互斥鎖 進程之間數據隔離，但是共享一套文件系統，因而可以通過文件來實現進程直接的通信，但問題是必須自己加鎖處理。 註意：加鎖的目的是為了保證多個進程修改同一塊數據時，同一時間只能有一個修改，即串行的修

python學習筆記——進程間通信方式對比

class 信號 爭奪 borde 臨界區 order style 讀寫 異步 1 通信方式對比 管道 消息隊列 共享內存 信號 開辟空間 內存 內存 內存 不開辟額外空間 讀寫方式 雙向/單向(信息流) 先進先出(消息體) 操作內存(數值數組) 發送處

VUe兄弟通信

命名規範 action pan deb exp 方式 add type rip 用過Vue，你肯定知道，Vue組件之間的通信常見的有$dispatch - 通過冒泡的方式傳遞事件$broadcast - 通過廣播的方式向子孫組件傳遞事件 如果組件之間的關系只是父-子關系，那

應用層與內核的幾種通信方式

物理內存 是什麽 nts iat 其他 輸入緩沖 BE virt getc 應用程序與驅動程序據我所知，細分可以分6種，ReadFile，WirteFile方式的緩沖區設備讀寫，直接方式讀寫，和其他方式讀寫。Io設備控制操作（即DeviceControl)的緩沖內存模式IO

nginx 與fastcgi通信方式

編輯 backlog 緩存 進行 均衡 返回 情況下 配置指南 簡單 前言 nginx和fastcgi的通信方式有兩種，一種是TCP的方式，一種是unix socke方式。兩種方式各有優缺點，這裏先給出兩種的配置方法，然後再對性能、安全性等做出總結。 TCP是使用TCP端口

進程間常見通信方式

正在 同步 復雜 信號 ket 信號傳遞 字節 運行 進程間 1. 管道pipe：管道是一種半雙工的通信方式，數據只能單向流動，而且只能在具有親緣關系的進程間使用。進程的親緣關系通常是指父子進程關系。 2. 命名管道FIFO：有名管道也是半雙工的通信方式，但是它允許無親緣關

php-fpm 和 nginx 的兩種通信方式

col 服務器 csdn .com 完整性 並發 pan conf document 在 linux 中，nginx 服務器和 php-fpm 可以通過 tcp socket 和 unix socket 兩種方式實現。 一下內容轉自：https://blog.csdn.n

進程間通信方式——共享內存

更改 tac creat fine truct 之前 main 訪問權限 c中 1.什麽是共享內存？ 共享內存就是允許兩個或多個進程共享一定的存儲區。就如同 malloc() 函數向不同進程返回了指向同一個物理內存區域的指針。當一個進程改變了這塊地址中的內容的時候，其它進程