vue1.0父子、兄弟間通信案例

阿新 • • 發佈：2017-08-13

text view list 發送 abs left meta 父親 mar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子組件通信</title>
    <link rel="stylesheet" href="src/dist/styles/iview.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="src/dist/vue.min.js"></script>
    <script src="src/dist/iview.min.js"></script>
    <style>
        *{
            box 
-sizing:border-box;
        }
        .header,.footer{
            width:1200px;
            height:60px;
            border:1px solid #ccc;
            text-align:center;
            line-height:60px;
            margin:0 auto;
            
        }
        .footer{
            position:absolute;
            left: 
50%;
            margin-left:-600px;
            bottom:0;
        }
        .main{
            width:1200px;
            margin:0 auto;
            min-height:400px;
            border:1px solid #ccc;
            margin-top:20px;
            padding:20px;
        }
    </style>
</head>
<body>
    <div id="page">
        <cc-header :ppt01="ppt01"></cc-header>
        <div class="main">
            <h2><i-button @click="sendHeader">父向子(header)傳數據</i-button></h2>
            <ul>
                <li v-for 
="item in list">{{item}}</li>
                <li>{{ppt02 || ‘---‘}}</li>
            </ul>
        </div>
        <cc-footer @change02="aceptFooter"></cc-footer>
    </div>
    <script>
        var hub = new Vue();

        Vue.component(‘ccHeader‘,{
            template:‘<div class="header">                我是header---------{{ppt01 || "==="}}                <i-button @click="sendFooter">發送給footer</i-button>            </div>‘,
            data:function(){
                return {
                    hh:‘‘
                }
            },
            props:[‘ppt01‘],
            methods:{
                sendFooter:function(){
                    alert(‘ccc‘)
                    hub.$emit(‘change01‘,this.ppt01)
                }
            }
        })

        Vue.component(‘ccFooter‘,{
            template:‘<div class="footer">                我是fooer----------{{ff || "==="}}                <i-button @click="sendFather">發送給父親</i-button>            </div>‘,
            data:function(){
                return{
                    ff:‘abcd‘
                }
            },
            methods:{
                sendFather:function(){
                    this.$emit(‘change02‘,this.ff)
                }
            },
            created:function(){
                var self = this;
                hub.$on(‘change01‘,function(val){
                    self.ff = val;
                })
            }
        })

        var vm = new Vue({
            el:‘#page‘,
            data:{
               list:[‘1‘,‘2‘,‘3‘],
               ppt01:‘‘,
               ppt02:‘‘
            },
            methods:{
                sendHeader:function(){
                    this.ppt01 = ‘呵呵‘;
                },
                aceptFooter:function(val){
                    alert(val+‘來自footer‘);
                    this.ppt02 = val;
                }
            }
        })

        
    </script>
</body>
</html>

vue1.0父子、兄弟間通信案例

text view list 發送 abs left meta 父親 mar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

vue2.0父子組件以及非父子組件如何通信

tty rep create pla eve 16px markup div ont 1.父組件 >>> 子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： <parent> <child :child-

Java多線程（二） —— 線程安全、線程同步、線程間通信（含面試題集）

err 線程等待共同點 -c java多線能夠空間而不是不一致一、線程安全多個線程在執行同一段代碼的時候，每次的執行結果和單線程執行的結果都是一樣的，不存在執行結果的二義性，就可以稱作是線程安全的。講到線程安全問題，其實是指多線程環境下對共享資源的訪問可能會

python基礎之進程間通信、進程池、協程

cancel 正在 producer 必須 pre 報錯 true 單線程維護進程間通信進程彼此之間互相隔離，要實現進程間通信（IPC），multiprocessing模塊支持兩種形式：隊列和管道，這兩種方式都是使用消息傳遞的。進程隊列queue 不同於線程queu

Python開發基礎--- 進程間通信、進程池、協程

start seq n+1 解釋 producer 其他 top 同時 pipe 進程間通信進程彼此之間互相隔離，要實現進程間通信（IPC），multiprocessing模塊支持兩種形式：隊列和管道，這兩種方式都是使用消息傳遞的。進程隊列queue 不同於線程queu

31、互斥鎖與進程間通信

介質 print bsp 你們很快客戶支持技術分享 consumer 我們之前做了多進程並發，那麽你們有沒有發現問題。如果說多個進程共享同一個數據，比如搶火車票大家同時在客戶端查看同時購買會出現什麽問題呢？今天我們將講述進程鎖還有進程間通信，進程之間彼此隔離，他們需

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

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

Linux進程間通信之管道(pipe)、命名管道(FIFO)與信號(Signal)

阻塞 node include 系統 types.h 標準 div [0 pipe 整理自網絡 Unix IPC包括：管道(pipe)、命名管道(FIFO)與信號(Signal) 管道(pipe) 管道可用於具有親緣關系進程間的通信，有名管道克服了管道沒有名字的

vue組件父子間通信之綜合練習--假的聊天室

ner name type 屬性 urn ejs rec 用戶輸入 for <!doctype html> <html> <head> <meta charset="UTF-8"> <title>組件父

vue組件父子間通信02

doctype class vue.js vuejs logs ets 獲取 gets ack 三、組件間通信（$parent $refs）父組件要想獲取子組件的數據：①在調用子組件的時候，指定ref屬性<child-component ref="mySon">

線程的幾個主要概念----線程間通信；線程死鎖；線程控制：掛起、停止和恢復(線程同步的5種方式)

推薦處理本地變量之間管理 zed 空間 get ted （一）線程同步（5種同步方式） 1.同步方法--->有synchronized關鍵字修飾的方法。（Java的每個內置對象都有一個內置鎖，當用synchronized修飾方法--->內置鎖保護整個方法

Python之進程同步控制（鎖信號量事件）、進程間通信——隊列和管道

load 很快容器數據安全全部傳遞幫我之前引入進程同步(multiprocess.Lock、multiprocess.Semaphore、multiprocess.Event) 鎖 —— multiprocess.Lock 通過剛剛的學習，我們千方百計實現了

st_vio——進程間通信接口抽象結構體

sock 註釋 windows系統 out rip peer 如果 ifd end 工作忙，學習忙，但還是得隨便寫點。 st_vio，顧名思義，應該是指virtual IO，即虛擬IO。根據代碼裏的註釋，這個是一個高度抽象的進程間通信接口結構體，mysql中，如果不是用C+

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

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

七. 多線程編程9.線程間通信

程序 tro 討論結束 ava 排隊被調用 clas www 上述例題無條件的阻塞了其他線程異步訪問某個方法。Java對象中隱式管程的應用是很強大的，但是你可以通過進程間通信達到更微妙的境界。這在Java中是尤為簡單的。像前面所討論過的，多線程通過把任務分成離散的和合乎

轉Android進程間通信（IPC）機制Binder簡要介紹和學習計劃

trac named 組成 get tle 能力計劃英文其中轉自：http://blog.csdn.net/luoshengyang/article/details/6618363/ 在Android系統中，每一個應用程序都是由一些Activity和Ser

進程間通信——消息隊列

如果 blank sof 標識 tro 相同聯系 ron 流浪 1. IPC標識符：　　每一個I P C目標都有一個唯一的I P C標識符。這裏所指的I P C目標是指一個單獨的消息隊列、一個信號量集或者一個共享的內存段。系統內核使用此標識符在系統內核中指明 I P C

APUE：進程間通信

操作 wait shmdt 半雙工信號 apue highlight mod 需要管道半雙工。一般由父進程創建，用於父子進程間、子進程間通信。匿名，一對一。 // fd[0] 只讀 // fd[1] 只寫 int pipe (int fd[2]); 簡單執行命令

APUE：高級進程間通信

creat conn 核心 sockets desc returns protocol type sin 這一章核心內容：使用 UNIX 域套接字傳送文件描述符。 /* Create two new sockets, of type TYPE in domain DO

轉：【Java並發編程】之十二：線程間通信中notifyAll造成的早期通知問題（含代碼）

data light lan 添加項 article util tool 元素 seconds 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/17229601 如果線程在等待時接到通知，但線程等待的條件

vue1.0父子、兄弟間 通信案例

相關推薦

vue1.0父子、兄弟間通信案例