Vue组件间数据传递的方式(3种)

Vue组件间数据传递的方式有以下三种：

1. props 与 events

使用props将数据从父组件传递到子组件，使用events将数据从子组件传递到父组件。

父组件传递数据给子组件

在父组件中，可以通过在子组件中使用props属性传递数据。props属性是一个数组，其中包含子组件中要接收的属性名。

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

在子组件中，可以像这样通过props接收数据。

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

子组件传递数据给父组件

在子组件中，使用$emit方法来触发事件并传递数据。

<template>
  <div>
    <button @click="onClick">Click me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('button-clicked', 'data from child component')
    }
  }
}
</script>

在父组件中，可以通过v-on指令绑定子组件的事件并接收数据。

<template>
  <div>
    <child-component @button-clicked="onButtonClicked"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  methods: {
    onButtonClicked(data) {
      console.log(data) // 'data from child component'
    }
  }
}
</script>

2. $emit 与 $on

使用Vue实例中的$emit方法和$on方法来进行事件的发送和接收。

这种方式的实现和第一种方式类似，只是使用的是Vue实例中的方法。

发送事件

在发送事件的组件中使用$emit方法

<template>
  <div>
    <button @click="onClick">Click me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$root.$emit('event', 'data from root Vue instance')
    }
  }
}
</script>

接收事件

在接收事件的组件中使用$on方法接收事件

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    this.$root.$on('event', data => {
      this.data = data
    })
  },
  beforeDestroy() {
    this.$root.$off('event')
  }
}
</script>

3. Vuex

Vuex是Vue.js的官方状态管理工具，可以用于在多个组件之间共享状态。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

在另一个组件中，可以通过dispatch一个action来修改count的值。

<template>
  <div>
    <button @click="increment">Increment another component</button>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

这样，所有使用count的组件都会自动更新。

以上就是Vue组件间数据传递的三种方式，它们各自有不同的应用场景，需要根据具体情况进行选择。