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教程: