关于vue.js:vue3组件常用的通信方式父传子子传父父直接获取子pinia

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