vue3.2 组件之间的数据共享方式（含vuex详解）

一、父子组件之间的数据共享

• vue3.2 setup 语法糖中：子组件使用 defineProps接收props , 使用 defineEmits传递给参数给父组件

1. 父向子传递数据

父组件通过动态绑定属性（v-bind，简写 :）向子组件传递数据，
子组件通过props 接收父组件传递的数据

• 父组件

<template>
  <test :info="peroson"></test>
</template>
<script setup>
import test from '@/views/test.vue'
const peroson = {
  name: 'dudu',
  age: 16
}
</script>

• 子组件

<template>
  <div>
    <p>姓名:{{ info.name }}</p>
    <p>年龄：{{ info.age }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  info: {
    type: Object
  }
})
</script>

2. 子向父传递数据

子组件通过自定义事件的方式：$emit('自定义事件名',要传递的数据) 向父组件通信，父组件 通过 @自定义方法名=''方法名''使用传递的方法和数据

• 父组件

<template>
  <h1>父组件</h1>
  <h5>子组件的年龄：{{ peroson.age }}</h5>
  <hr />
  <test :info="peroson" @changeAge="changeAgeClick"></test>
</template>
<script setup>
import test from '@/views/test.vue'
import { ref } from 'vue'
const peroson = ref({
  name: 'dudu',
  age: 16
})
// 修改年龄
const changeAgeClick = (val) => {
  peroson.value.age += val
}
</script>
<style lang="scss"></style>

• 子组件

<template>
  <div>
    <p>姓名:{{ info.name }}</p>
    <p>年龄：{{ info.age }}</p>
    <button @click="addAge">增加年龄</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  info: {
    type: Object
  }
})
const emit = defineEmits(['changeAge'])
// 增加年龄
const addAge = () => {
  console.log(props.info)
  emit('changeAge', 2)
}
</script>
<style lang="scss" scoped></style>

二、兄弟组件的数据共享——EventBus

vue3中移除了事件总线，需要借助第三方 mitt 实现

1. 安装 mitt

cnpm i --save mitt

2. 新建 eventbus.js

// 导入mitt包
import mitt from 'mitt'
// 创建EventBus实例对象
const bus = mitt()
// 共享出eventbus的实例对象
export default bus

3. 在数据接收方自定义事件

通过 bus.on('事件名',事件处理函数) 的方法注册一个自定义事件

<template>
  <div>
    <h3>数据接收方</h3>
    <p>num的值：{{ num }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import bus from './eventbus'
const num = ref(0)
bus.on('countChange', (count) => {
  num.value = count
})
</script>

4. 在事件发送方触发事件

通过 bus.emit('事件名',要发送的数据） 触发自定义事件

<template>
  <div>
    <h3>数据发送方</h3>
    <p>count的值：{{ count }}</p>
    <button @click="addCount">增加count值</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import bus from './eventbus'
const count = ref(0)
const addCount = () => {
  count.value++
  bus.emit('countChange', count)
}
</script>

三、后代关系组件之间的数据共享

指父组件向其子孙组件共享数据，通过 数据发送方使用：provide 和 数据接收方使用：inject实现

1. 父节点通过 provide() 方法，对其子孙节点共享数据

<template>
  <div class="container">
    <demo></demo>
  </div>
</template>

<script setup>
import demo from '@/views/demo01.vue'
import { provide } from '@vue/runtime-core'
const color = 'red'
provide('color', color)
</script>

2. 子孙节点通过 inject，接收父节点向下共享的数据

<template>
  <div>
    <p :style="`color:${color}`">我是孙组件</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'
const color = inject('color')

四、vuex

1. 是什么

• vuex 是用于对vue中多个组件的共享状态进行集中式管理（管理）
• vuex 也是组件间通信的一种方式，适用于任意组件的通信

2. vuex 工作原理

理解：

组件：客人
actions：服务员
mutations：后厨
state：菜品
客人点菜：调用dispatch
服务员获取客人点的菜，并且下单，然后提交给后厨进行处理
但客人也可以直接告诉后厨自己的要求（组件跳过action，直接提交mutation）

3. vuex 的使用

1. 将需要共享的数据存入state中

state: {
    count:0
  },

2. 组件中 调用 dispatch触发action

<template>
  <div>
    <h1>根组件</h1>
    <p>count的值为：{{ $store.state.count }}</p>
    <button @click="addCount">count增加</button>
    <hr />
    <demo></demo>
  </div>
</template>

<script setup>
import {} from 'vue'
import { useStore } from 'vuex'
import demo from '@/views/demo.vue'
// 导入store
const store = useStore()
const addCount = () => {
  // 触发dispatch
  store.dispatch('add', 2)
}
</script>
<style lang="scss" scoped></style>

3. action中的函数接收两个参数，第一个是上下文context，第二个是传递过来的数据

• actions中再调用commit 提交mutation
• actions中提交的方法名一般大写

actions: {
    add(context, val) {
      this.commit('ADD', val)
    }
  },

4. mutation中的处理

• mutation中的函数接收两个参数，第一个是state，第二个是传递过来的数据

mutations: {
    ADD(state, val) {
      state.count += val
    }
  },

5. 在模板中通过 $store.state.xxx 获取需要的state数据

<p>count的值为：{{ $store.state.count }}</p>

4. getters配置项

• getters 相当于store的计算属性，可以用来加工state中的数据
• getters中的函数接收一个state参数，表示当前仓库的state
• gettes 返回需要的数据

getters: {
    bigSum(state) {
      return state.count * 32
    }
  },

• 在模板中通过 $store.getters.xxx 使用需要的getters数据