Vue.js
Eventbuss

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
Sök…


Introduktion

Arrangebussar är ett användbart sätt att kommunicera mellan komponenter som inte är direkt relaterade, dvs. Har ingen relation mellan förälder och barn.

Det är bara en tom vue instans, som kan användas för att $emit händelser eller lyssna $on nämnda händelser.

Syntax

  1. exportera standard ny Vue ()

Anmärkningar

Använd vuex om din applikation har många komponenter som kräver varandras data.

eventBus

// setup an event bus, do it in a separate js file
var bus = new Vue()

// imagine a component where you require to pass on a data property
// or a computed property or a method!

Vue.component('card', {
  template: `<div class='card'>
    Name: 
      <div class='margin-5'>
          <input v-model='name'>
    </div>
    <div class='margin-5'>
      <button @click='submit'>Save</button>
    </div>
  </div>`,
  data() {
    return {
      name: null
    }
  },
  methods: {
    submit() {
      bus.$emit('name-set', this.name)
    }
  }
})

// In another component that requires the emitted data.
var data = {
  message: 'Hello Vue.js!'
}

var demo = new Vue({
  el: '#demo',
  data: data,
  created() {
    console.log(bus)
    bus.$on('name-set', (name) => {
      this.message = name
    })
  }
})


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow