vue.js學習筆記（3）— $emit 做用快速瞭解

時間 2019-11-10

標籤 vue.js vue 學習筆記 emit 快速瞭解欄目 JavaScript 简体版

原文原文鏈接

$emit 觸發當前實例上的事件，也能夠簡單的理解爲觸發父組件上的事件（向上冒泡），實例（當前實例）以下：javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>session</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css">
            #session {
                width: 600px;
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="counter-event-example">
          <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
        
        <script>
            Vue.component('button-counter', {
              template: '<button v-on:click="incrementCounter">點我噠</button>',
              methods: {
                incrementCounter: function () {
                    alert("我是組件");
                      this.$emit('increment')
                }
              }
            })
            
            new Vue({
              el: '#counter-event-example',
              methods: {
                incrementTotal: function () {
                    alert("我是當前實例");
                }
              }
            })
        </script>
    </body>
</html>

當點擊「點我噠」的時候，會依次跳出下面兩個 alert，根據先後跳出的順序咱們能夠清楚的看到事件的先後觸發順序，如圖：css

這樣是否是就很清楚的理解 $emit 的做用了，:）html

其中，咱們看Vue的官方文檔的時候，會發現它是這樣介紹的，如圖下：vue

從介紹當中咱們能夠看到，觸發的方法要用字符串的方式來寫（上面的例子就是這樣的），另外，還提到它是能夠向上傳遞參數的，好了，又一個例子來了，請接好：java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>playload</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="message-event-example" class="demo">
            <p v-for="msg in messages">{{ msg }}</p>
            <button-message v-on:message="handleMessage"></button-message>
        </div>
        <script type="text/javascript">
            Vue.component('button-message', {
                template: `<div>
                    <input type="text" v-model="message" />
                    <button v-on:click="handleSendMessage">Send</button>
                    </div>`,
                data: function () {
                    return {
                      message: 'test message'
                    }
                },
                methods: {
                    handleSendMessage: function () {
                        this.$emit('message', { message: this.message })
                        //this.$emit('message', this.message)
                        //this.$emit('message', [this.message])
                    }
                  }
            })
            
            new Vue({
                el: '#message-event-example',
                data: {
                    messages: []
                },
                methods: {
                    handleMessage: function (payload) {
                        console.log(payload);
                          this.messages.push(payload.message)
                          //this.messages.push(payload.message)
                        //this.messages.push(payload[0])
                    }
                }
            })
        </script>
    </body>
</html>