Enam cara untuk berkomunikasi antara komponen Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi satu halaman. Dalam Vue, komponen ialah unit asas untuk membina aplikasi Komponen ialah blok kod yang boleh digunakan semula yang digunakan untuk memaparkan dan memproses data. Komunikasi komponen adalah salah satu mekanisme teras untuk pemindahan data dan interaksi antara komponen. Dalam artikel ini, kami akan meneroka enam cara komponen berkomunikasi.

1. Props dan Acara

Props dan Acara ialah kaedah komunikasi komponen paling asas dalam Vue. Melalui prop, komponen induk menghantar data kepada komponen anak. Komponen anak menghantar data kepada komponen induk melalui pembina peristiwa. Kaedah komunikasi ini dicirikan oleh penghantaran sehala.

Komponen induk menghantar data kepada komponen anak melalui prop:

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Dalam komponen anak, anda perlu mengisytiharkan prop dan menggunakan props untuk menerima data daripada komponen induk:

Kemudian, komponen anak menghantar data kepada komponen induk melalui peristiwa:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

Dalam komponen induk, anda perlu mendengar acara untuk komponen anak dan menerima data daripada komponen anak dalam acara tersebut fungsi mendengar:

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

2. Vuex

Vuex ialah pemalam rasmi untuk pengurusan negeri dalam Vue. Vuex melaksanakan model pengurusan keadaan global. Ia secara berpusat menguruskan keadaan semua komponen aplikasi melalui kedai. Apabila berbilang komponen berkongsi keadaan, menggunakan Vuex menjadikannya lebih mudah untuk mengurus pertukaran data dan komunikasi antara komponen.

Pertama, kita perlu mencipta kedai Vuex:

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

Dalam komponen, kita boleh menggunakan $store untuk mengakses keadaan dalam kedai dan menggunakan kaedah komit untuk menyerahkan mutasi untuk mengubah suai keadaan:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

3. $ibu bapa dan $anak

Setiap komponen dalam Vue mempunyai atribut $ibu bapa dan $anak. Sifat $parent menghala ke komponen induk komponen, dan sifat $children menghala ke komponen anak komponen. Melalui sifat $parent dan $children, komponen boleh terus mengakses data dan kaedah komponen induk dan anak.

Sebagai contoh, komponen induk boleh mengakses data dan kaedah komponen anak melalui atribut $children:

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

Dalam komponen anak, kaedah mesej dan updateMessage perlu ditakrifkan:

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

IV , $refs

Setiap komponen dalam Vue mempunyai atribut $refs. Atribut $refs ialah objek yang mengandungi rujukan kepada subkomponen atau elemen DOM yang dinamakan menggunakan atribut ref dalam komponen. Melalui atribut $refs, komponen boleh merujuk dan memanggil satu sama lain.

Sebagai contoh, kita boleh mendapatkan rujukan komponen anak melalui atribut ref dalam komponen induk:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

Dalam komponen anak, kita perlu menentukan kaedah updateMessage:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

5. Bas Acara

Bas Acara ialah sistem acara pusat yang digunakan secara meluas yang boleh menyampaikan acara dengan cekap antara komponen Vue. Bas Acara ialah contoh Vue mudah yang boleh menghantar acara ke komponen Vue lain melalui kaedah $emit, dan juga boleh menerima acara yang dihantar oleh komponen Vue lain melalui kaedah $on.

Apabila melaksanakan Bas Acara, kami perlu mencipta contoh Vue baharu:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

Kemudian, kami boleh memperkenalkan Bas Acara dalam komponen dan menggunakan $emit untuk menghantar acara dan $on untuk menerima acara ：

import Vue from 'vue'

const bus = new Vue()

export default bus

6. Sedia dan Suntikan

Sedia dan Suntikan baharu dalam Vue 2.2 ialah kaedah komunikasi komponen lanjutan. Sediakan dan Suntikan membenarkan komponen induk menghantar data kepada semua komponen turunan, bukannya hanya mengarahkan anak. Provide and Inject ialah satu bentuk komunikasi komponen yang berbeza daripada prop, acara, dan $ibu bapa/$anak Ia adalah kaedah komunikasi yang lebih fleksibel dan terkapsul.

Komponen induk menyediakan data melalui menyediakan:

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

Dalam komponen anak, kita perlu menentukan suntikan untuk menerima data yang diluluskan oleh komponen induk:

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

Ini adalah enam jenis komunikasi komponen Vue Pengenalan kepada kaedah. Senario aplikasi yang berbeza memerlukan kaedah komunikasi komponen yang berbeza. Menguasai kaedah komunikasi ini boleh menjadikan pembangunan komponen Vue lebih cekap, mudah dan fleksibel.

Atas ialah kandungan terperinci Enam cara untuk berkomunikasi antara komponen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!