vue组件间传值的方法你知道几种

当我们使用Vue.js框架时，组件和组件间的通信常常需要使用传值方法来完成。下面将介绍Vue组件间传值的多种方法。

Props

Props是Vue中一种父子组件传递数据的方式。父组件可以通过标签属性的形式把数据传递给子组件，子组件通过props来接收这些数据。

例如，父组件中这样写：

<template>
  <div>
    <child-component :name="parentName"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentName: "Vue",
    };
  },
};
</script>

子组件里这样写：

<template>
  <div>
    {{ name }}组件
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  props: {
    name: String,
  },
};
</script>

这样，父组件就向子组件传递了name属性，子组件接收到了这个属性值，并将其显示在页面上。

Event Bus

Event Bus是一种Vue.js实现跨组件通信的方式。我们可以创建一个全局事件总线，并使用该总线在不同组件之间调度事件和消息。

首先，在Vue实例中注册一个全局事件中心：

Vue.prototype.$bus = new Vue()

然后创建一个事件发布组件，例如下面这样：

// 发布组件
export default {
  methods: {
    sendMsg(msg) {
      this.$bus.$emit('eventName', msg)
    },
  },
}

最后创建一个事件订阅组件，例如下面这样：

// 订阅组件
export default {
  data() {
    return {
      msg: '',
    }
  },
  mounted() {
    this.$bus.$on('eventName', (msg) => {
      this.msg = msg
    })
  },
}

这样，当发布组件调用了sendMsg方法时，订阅组件就会收到一条事件并更新页面。

Vuex

Vuex是Vue框架中的一个状态管理库，我们可以使用Vuex来管理组件之间的状态和数据。

首先，在Vuex中定义一些数据：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
})

export default store

然后，在需要使用vuex数据的组件中，使用mapState进行数据映射：

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({ count: state => state.count }),
  },
}

这样，父组件可以直接通过Vuex中的state来进行传递数据了。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="incrementCount">add</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({ count: state => state.count }),
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment')
    },
  },
};
</script>

总结

以上就是Vue组件间传值的三种方法，分别是Props、Event Bus和Vuex，它们分别适用于不同的场景和应用。我们可以根据实际情况选择使用不同的方法进行开发。