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

htmledit_views">

前言

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

1.props/emit

父组件

html"><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>

子组件

html"><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

父组件

html"><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>

子组件

html"><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

父组件

html"><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使用

html"><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

父组件

html" title=javascript>javascript">import { ref, provide } from 'vue'provide('sharedData', 'This is provided data')

子组件

html"><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"

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

html" title=javascript>javascript">// 此商店用于存放全局的一些状态
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被持久化保存}
})