Vue.js組件通信之自定義事件詳解

更新時(shí)間：2019年10月19日 09:14:10 作者：吳聲子夜歌

這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

組件通信

從父組件向子組件通信，通過props傳遞數(shù)據(jù)就可以了，但Vue組件通信的場(chǎng)景不止有這一種，歸納起來，組件之間的通信可以用下圖來表示：

自定義事件

當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，就要用到自定義事件。子組件用**$ emit()來觸發(fā)事件**，父組件用**$ on()**來監(jiān)聽子組件的事件。

父組件也可以直接在子組件的自定義標(biāo)簽上使用v-on來監(jiān)聽子組件觸發(fā)的事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>自定義事件</title>
</head>
<body>
  <div id="app">
    <p>總數(shù):{{total}}</p>
    <my-component
      @increase="handleGetTotal"
      @reduce="handleGetTotal"></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      template: '\
        <div>\
          <button @click="handleIncrease">+1</button>\
          <button @click="handleReduce">-1</button>\
        </div>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        handleIncrease: function () {
          this.counter++;
          this.$emit('increase', this.counter);
        },
        handleReduce: function () {
          this.counter--;
          this.$emit('reduce', this.counter);
        }
      }
    });

    var app = new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        handleGetTotal: function (total) {
          this.total = total;
        }
      }
    });
  </script>
</body>
</html>

子組件有兩個(gè)按鈕，分別實(shí)現(xiàn)+1和-1的效果，在改變組件的data “counter”后，通過$emit()在把它傳遞給父組件，父組件使用v-on:increase和v-on:reduce監(jiān)聽事件。

$emit()方法的第一個(gè)參數(shù)是自定義事件的名稱，后面的參數(shù)是要傳遞的數(shù)據(jù)，可以不填或者填寫多個(gè)。

注意：除了用v-on在組件上監(jiān)聽自定義事件外，也可以監(jiān)聽DOM事件，這時(shí)候可以用 .native修飾符表示監(jiān)聽的是一個(gè)原生事件，監(jiān)聽的是該組件的根元素：

<my-component v-on:click.native="handleClick"></my-component>

使用v-model

Vue 2.x 可以在自定義組件上使用v-model指令。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>使用v-model</title>
</head>
<body>
  <div id="app">
    <p>總數(shù)：{{total}}</p>
    <my-component v-model="total"></my-component>
  </div>
  <script>
    Vue.component('my-component',{
      template: '<button @click="handleClick">+1</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        handleClick: function () {
          this.counter++;
          this.$emit('input',this.counter);
        }
      }
    });

    var app = new Vue({
      el: '#app',
      data: {
        total: 0
      }
    });
  </script>
</body>
</html>

仍然是點(diǎn)擊按鈕+1的效果，不過這次組件$emit()的事件是特殊的input，在使用組件的父級(jí)，并沒有在<my-component>上使用@input=“handler”，而是使用了v-model板頂?shù)囊粋€(gè)數(shù)據(jù)total。這也可以稱作是一個(gè)語法糖，因?yàn)樯厦娴氖纠梢蚤g接地用自定義事件來實(shí)現(xiàn)：

<div id="myApp">
  <p>總數(shù)：{{total}}</p>
  <my-component1 @input="handlegetTotal"></my-component1>
</div>
<script>
  Vue.component('my-component1',{
    template: '<button @click="handleClick">+1</button>',
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      handleClick: function () {
        this.counter++;
        this.$emit('input',this.counter);
      }
    }
  });

  var myApp = new Vue({
    el: '#myApp',
    data: {
      total: 0
    },
    methods: {
      handlegetTotal: function (value) {
        this.total = value;
      }
    }
  });
</script>

v-model還可以用來創(chuàng)建自定義的表單輸入組件，進(jìn)行數(shù)據(jù)雙向綁定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>自定義表單輸入組件</title>
</head>
<body>
  <div id="app">
    <p>總數(shù)：{{total}}</p>
    <my-component v-model="total"></my-component>
    <button @click="handleReduce">-1</button>
  </div>
  <script>
    Vue.component('my-component',{
      props: ['value'],
      template: '<input :value="value" @input="updateValue">',
      methods: {
        updateValue: function (event) {
          this.$emit('input', event.target.value);
        }
      }
    });

    var app = new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        handleReduce: function () {
          this.total--;
        }
      }
    });
  </script>
</body>
</html>