2018-09-23同級之間傳值

一:父子組件通信(對話)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <one></one>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component('one',{
            template:`
                <div>
                    <two @send='news' newName='A'></two>
                    <two @send='news' newName='B'></two>
                    <ul>
                        <li v-for='value in arr'>{{value}}</li>
                    </ul>                    
                </div>
            `,
            data:function(){
                return{
                    arr:[]
                }
            },
            methods:{
                news:function(txt){
                    this.arr.push(txt)
                }
            }
        })
        
        Vue.component('two',{
            props:['newName'],
            template:`
                <div>
                    <label>{{newName}}</label>
                    <input type='text' v-model='name'>
                    <button @click='btn'>發(fā)送</button>
                </div>
            `,
            data:function(){
                return{
                    name:''
                }
            },
            methods:{
                btn:function(){
                    this.$emit('send',this.newName+':'+this.name)
                }
            }
        })
        
        new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

屏幕展示:對話形式

1.png
2.png
3.png

生命周期

4.png
5.png

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>{{msg}}</div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>
</body>
</html>

屏幕展示:彈出多個彈出框beforeCreate;created穗慕;beforeMount妻导;mounted,倔韭,之后出現(xiàn)'hello vue'

6.png
7.png

③非父子傳值:同級之間傳值可以借助第三方(①父傳子:用屬性傳寿酌;②:子傳父:用事件傳)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <one></one>
        <two></two>
    </div>
    <script src="vue.js"></script>
    <script>
        var q = new Vue();
        
        Vue.component('one',{
            template:`
                <div>
                    <h1>這是one組件</h1>
                    <button @click='bt'>傳送</button>
                </div>
            `,
            data:function(){
                return{
                    msg:'這是一句話'
                }
            },
            methods:{
                bt:function(){
                    q.$emit('send',this.msg)
                }
            }
        })
        
        Vue.component('two',{
            template:`
                <div>
                    <h1>這是two組件</h1>
                    <a href=''>{{msg1}}</a>
                </div>
            `,
            data:function(){
                return{
                    msg1:''
                }
            },
            mounted:function(){
                q.$on('send',msg=>{
                    console.log(this);
                    this.msg1=msg
                })
            }
        })
        
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

屏幕展示:點擊按鈕

8.png
9.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末硕并,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子倔毙,更是在濱河造成了極大的恐慌,老刑警劉巖卵蛉,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凯正,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)梧疲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門幌氮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人该互,你說我怎么就攤上這事÷悖” “怎么了随橘?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蒲祈。 經(jīng)常有香客問我萝嘁,道長梆掸,這世上最難降的妖魔是什么牙言? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任嬉挡,我火速辦了婚禮汇恤,結(jié)果婚禮上拔恰,老公的妹妹穿的比我還像新娘。我一直安慰自己颜懊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布匠璧。 她就那樣靜靜地躺著咸这,像睡著了一般。 火紅的嫁衣襯著肌膚如雪媳维。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天指黎,我揣著相機(jī)與錄音州丹,去河邊找鬼。 笑死吓揪,一個胖子當(dāng)著我的面吹牛蚁鳖,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播醉箕,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼放棒!你這毒婦竟也來了己英?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤厢破,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后摩泪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡嚷掠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年荞驴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霹娄。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡孙蒙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挎峦,到底是詐尸還是另有隱情合瓢,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布顿苇,位于F島的核電站税弃,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏则果。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一遗增、第九天 我趴在偏房一處隱蔽的房頂上張望款青。 院中可真熱鬧,春花似錦、人聲如沸蔗坯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鼎兽。三九已至铣除,卻和暖如春谚咬,著一層夾襖步出監(jiān)牢的瞬間尚粘,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工秉继, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留泽铛,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓杠茬,卻偏偏與公主長得像弛随,于是被迫代替她去往敵國和親瓢喉。 傳聞我的和親對象是個殘疾皇子舀透,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容