共计 3205 个字符，预计需要花费 9 分钟才能阅读完成。
vue3 组件罕用的通信形式有很多，父传子 *， 子传父 ， 父间接获取子 ref,pinia，pinia 在 vue3 中替换了 vuex，更简洁，方便使用操作。EventBus 公交车 ，provide + inject 等。
一、父传子(props)
父传子是通过父组件自定义标签增加属性，并传递数据给子组件，子组件接管通过 引入 vue 插件 解构 defineProps, 调用并创立 props，同时指定要接管的数据名称。
const props = defineProps(['传递的数据名称']) 案例:
父组件 在 views 文件夹中创立文件 Home.vue
<script setup lang="ts">
// 引入 vue 插件
import {ref} from "vue"
// 引入子组件
import Son from "../components/Son.vue"
// 定义传递给子组件的数据
const title = ref("我是子组件")
</script>
<template>
<h1> 父组件 </h1>
<!-- 应用子组件 -->
<Son :title="title"></Son>
</template>
子组件 在 components 文件夹中创立 Son.vue
<script setup lang="ts">
// 引入 vue 解构 须要的办法
import {defineProps} from "vue"
// 调用 defineProps 办法并获取父组件传递的数据
// const props = defineProps(['title'])
const {title} = defineProps(['title']) // 能够简写 解构
</script>
<template>
<!-- 渲染父组件传递的数据 -->
<h1>{{title}}</h1>
</template>
路由：import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
redirect: "/home"
},
{
path: '/home',
name: 'about',
component: () => import('../views/Home.vue')
}
]
})
export default router
效果图:
二、子传父 (emit) 自定义事件
子传父通过 父组件给子组件标签绑定自定义事件，将事件函数定义在父组件中，子组件中通过从 vue 中解构 defineEmits，调用并创立 emit，同时接管父组件给绑定的事件。调用 emit触发父组件给绑定的事件，并传递数据，最初父组件在事件函数中通过参数接管子组件传递的数据。
案例：
父组件
<script setup lang="ts">
// 引入 vue 插件
import {ref} from "vue"
// 引入子组件
import Son from "../components/Son.vue"
// 定义传递给子组件的数据
const title = ref("我是子组件")
const msg = ref('')
// 定义事件函数
const handleAdd = (item: any) => {msg.value += item}
</script>
<template>
<h1> 父组件 </h1>
<!-- 应用子组件
title: 传递给子组件的数据
handleAdd: 自定义事件
-->
<Son :title="title" @handleAdd="handleAdd"></Son>
<h3>{{msg}}</h3>
</template>子组件
<script setup lang="ts">
// 引入 vue 解构 须要的办法
import {defineProps, defineEmits} from "vue"
// 调用 defineProps 办法并获取父组件传递的数据
// const props = defineProps(['title'])
const {title} = defineProps(['title']) // 能够简写 解构
// 调用 defineEmits 办法 并承受父组件给绑定的事件
const emit = defineEmits(['handleAdd'])
const handleTitle = () => {emit("handleAdd", '我是子组件传递的数据')
}
</script>
<template>
<!-- 渲染父组件传递的数据 -->
<h1 @click="handleTitle">{{title}}</h1>
</template>效果图：
三、ref()
ref()办法 从 vue 中解构出 ref, 而后父组件给 dome 标签或者子组件标签，增加 ref 属性，值是曾经定义好的 ref 空数据的变量名称。
子组件从 vue 中解构出 defineExpose，调用并想外裸露你想要获取的数据 / 办法
父组件通过从 vue 中解构生命周期 onMounted，调用onMounted 生命周期在外面 通过调用 ref 的数据 value 获取到 dome 标签 或 子组件实例对象。
案例：
父组件
<script setup lang="ts">
// 引入 vue 插件
import {ref, onMounted} from "vue"
// 引入子组件
import Ref from "../components/Ref.vue";
// 定义 ref
const myref = ref()
onMounted(() => {console.log(myref.value, '');
// ref 组件定义的数据
console.log(myref.value.message);
// 调用 ref 组件中暴露出的办法
myref.value.handleAdd()})
</script>
<template>
<h1> 父组件 </h1>
<!-- 定义 ref -->
<Ref ref="myref"></Ref>
</template>子组件
<script setup lang="ts">
// 引入 vue
import {defineExpose, ref} from "vue"
// 定义数据
const message = ref("我是 Ref 子组件中的数据")
// 定义方法
const handleAdd = () => {console.log('我是 Ref 子组件中的办法');
}
// 通过 defineExpose 将数据办法裸露进来
defineExpose({
message,
handleAdd
})
</script>
<template>
我是 ref 办法
</template>效果图：
四、pinia
Vuex 和 Pinia 是 Vue 3 中的全局状态管理工具，应用这两个工具能够轻松实现组件通信。
它们都是全局的、所有组件都能够拜访的、存储数据和办法，用来治理组件中的共享状态的仓库。并且可能在整个组件中进行拜访和批改。让咱们更无效的 组织 和 治理 整个组件的状态，使咱们更轻松的开发简单的、大型数据的前端我的项目。
同时解决了同步异步对调试工具的影响 和 代码的耦合性 还有组件之间数据通信的凌乱问题。
-
应用 pinia 首先咱们须要先下载安装
npm install pinia - 而后须要在
main.js/ts中配置 - 创立仓库文件夹(stores)，同时定义仓库文件
-
仓库文件的内容
- 导入
- 创立仓库
- 导出仓库
// 导入 import {defineStore} from "pinia"; import {ref} from "vue" // 创立仓库 const tableStore = defineStore("table", () => { // 定义数据 let count = ref(0) // 定义方法 const changeCount = () => { // 数量自增 count.value++; } // 返回 数据 和 办法 return { count, changeCount } }) // 导出仓库 export default tableStore
