Vue.js: 元件 Components - Events Up 自定義事件

為了共用程式碼,我們會將可重用的部份拆解為「元件」,而父子元件有可能必須溝通。父子元件溝通時,父層使用 props down 將資訊傳遞給子層,而子層透過 events up 的方式 (即$emit) 將結果傳回父層。

使用v-on綁定自定義事件

v-on可以用來綁定自定義事件「sayhi」,並代入父層要觸發的 method「greet」與參數 name。如下 Demo 所示,點擊「Say Hi!」按鈕會跳出訊息「Hi Peter」。

Demo

Vue.js: 元件 Components - 使用`v-on`綁定自定義事件

程式碼

<div id="app">
  <prompt-component @sayhi="greet(name)"></prompt-component>
</div>
Vue.component('prompt-component', {
  template: '<button @click="sayhi(name)">Say Hi!</button>',
  delimiters: ['${', '}'],
  props: ['name'],
  methods: {
    sayhi: function(name) {
      this.$emit('sayhi');
    }
  }
});

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    name: 'Peter'
  },
  methods: {
    greet: function(name) {
      alert('Hi ' + name);
    }
  }
});

// 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。

使用自定義事件的表單輸入元件

這讓我們更好客製化表單元件。

步驟如下

Demo

使用自定義事件的表單輸入元件

程式碼

<div id="app">
  <prompt-component v-model="name"></prompt-component>
</div>
Vue.component('prompt-component', {
  template: '<input :value="value" @input="updateValue($event.target.value)">',
  delimiters: ['${', '}'],
  props: ['value'],
  methods: {
    updateValue: function(value) {
      console.log(value);
    }
  }
})

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    name: 'Peter'
  }
});

以上參考 Components — Vue.js


comments powered by Disqus