当前位置：首页 > article >正文

Vue 常见的几种通信方式（总结）

article 2024/9/20 18:02:02

前言

Vue的通信方式，相信各位小伙伴都已经滚瓜烂收了，但是我估计咱们平常用到的就那么几个，那么剩余的哪些具体是怎么使用的，或者再去温习一下，我觉得也是很有必要的。

1.props/emit

父组件

<template>
  <h2>props传递和emit传递</h2>
  <CustomPropsEmits :title="pageTitle" @update-title="handleTitleUpdate"></CustomPropsEmits>
</template>

<script setup>
import { ref} from 'vue'
import CustomPropsEmits from './components/customPropsEmits.vue'

// 父组件的状态
const pageTitle = ref('父组件的值')

// 父组件处理子组件的事件
const handleTitleUpdate = (newTitle) => {
  pageTitle.value = newTitle
}

</script>

子组件

<template>
  <div>
    <h3>{{ props.title }}</h3>
    <el-button @click="updateTitle">Update 父组件</el-button>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
// 使用 defineProps 接收父组件传递的 prop
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})

// 定义 emit 用于发射事件
const emit = defineEmits(['update-title'])

// 点击按钮时发射事件
const updateTitle = () => {
  emit('update-title', '子组件去改变')
}
</script>

2.v-model

父组件

<template> 
 <h2>v-model传值</h2>
  <p>{{ message }}</p>
  <CustomVodel v-model="message"></CustomVodel>
</template>

<script setup>
import {ref} from 'vue'
import CustomVodel from './components/customVodel.vue'


const message = ref('Hello, World!')
</script>

子组件

<template>
  <div>
    <input v-model="localValue" />
  </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue'
// 使用 defineProps 接收父组件传递的 prop
const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
})

// 定义 emit 用于发射事件
const emit = defineEmits(['update:modelValue'])

// 创建一个局部变量，保存 modelValue 的值
const localValue = ref(props.modelValue)

// 监听 localValue 的变化，并发射事件通知父组件
watch(localValue, (newValue) => {
  emit('update:modelValue', newValue)
})
</script>

3.refs

父组件

<template>  
<h2>refs 子向父通信</h2>
  <el-button @click="callChildMethod">Call Child Method</el-button>
  <CustomRef ref="childRef"></CustomRef>s
</template> 

<script setup>
import { ref, provide } from 'vue'-
import CustomRef from './components/customRef.vue'
const childRef = ref(null)
// 调用子组件的方法
const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.sayHello() // 调用子组件的方法
  }
}

子组件一定要搭配defineExpose使用

<template>
  <div>
    <p>Hello, I'm the Child Component!</p>
  </div>
</template>

<script setup>
import { defineExpose } from 'vue'

// 定义子组件的方法
// eslint-disable-next-line no-unused-vars
const sayHello = () => {
  console.log('Hello from Child Component!')
}
defineExpose({ sayHello })
</script>

4.provide/inject

父组件

import { ref, provide } from 'vue'

provide('sharedData', 'This is provided data')

子组件

<template>
  <div>{{ injectedData }}</div>
  <p>这里是传递下来的组件</p>
</template>

<script setup>
import { inject } from 'vue'

const injectedData = inject('sharedData')
</script>

5.eventBus

父向子通信(Vue3移除) 【官方推荐使用 mitt 或 tiny-emitter，使用pubsub-js也可以】

6.状态管理器Vuex/Pinia

注意要配合一个插件才可以实现持久化存储

"pinia-plugin-persistedstate"

这里的代码我只写仓库里的代码

// 此商店用于存放全局的一些状态
import { defineStore } from 'pinia'

export const useAllStore = defineStore('all', {
  state: () => ({
    isCollapse: false,
    defaultActive: '1-1'
  }),
  actions: {
    SetIsCollapseInfo(data) {
      this.isCollapse = data
    },
    setDefaultActive(data) {
      this.defaultActive = data.toString()
    }
  },
  persist: {
    paths: ['isCollapse', 'defaultActive'] //只有 isCollapse，defaultActive被持久化保存
  }
})