Vue.js組件通信

如何使組件在Vue.js應用程序中進行通信。


Vue中的組件可以通過各種方式進行通信。

道具

第一種方法是使用道具

父級通過在組件聲明中添加參數來“傳遞”數據:

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script> import Car from ‘./components/Car’

export default { name: ‘App’, components: { Car } } </script>

道具是單向的:從父母到孩子。父母每次更改道具時,都會將新值發送給孩子並重新呈現。

反之則不成立,您絕對不應在子組件內部變異道具。

使用事件從孩子與父母溝通

通過事件,您可以從孩子到父母進行交流:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

家長可以使用v-on指令包含在其模板中的組件時:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function() { //… } } } </script>

您當然可以傳遞參數:

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

並從父級檢索它們:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function(param1, param2) { //… } } } </script>

使用事件總線在任何組件之間進行通信

使用事件,您不僅限於兒童與父母之間的關係。

您可以使用所謂的活動巴士

上面我們用過this.$emit在組件實例上發出事件。

相反,我們可以做的是在更易於訪問的組件上發出事件。

this.$root根組件,通常用於此目的。

您也可以創建專用於此作業的Vue組件,然後將其導入所需的位置。

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

任何其他組件都可以偵聽此事件。您可以在mounted打回來:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

備擇方案

這就是Vue開箱即用的功能。

當您超出此範圍時,可以查看威克斯或其他第三方庫。

免費下載我的Vue手冊


更多vue教程: