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.js組件通信

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

道具

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

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

備擇方案

更多vue教程：