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