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

vue3 组件罕用的通信形式有很多，父传子 *， 子传父 ， 父间接获取子 ref,pinia，pinia 在 vue3 中替换了 vuex，更简洁，方便使用操作。EventBus 公交车 ，provide + inject 等。

父传子是通过父组件自定义标签增加属性，并传递数据给子组件，子组件接管通过引入 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

效果图:

子传父通过父组件给子组件标签绑定自定义事件，将事件函数定义在父组件中，子组件中通过从 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()办法从 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>

效果图：

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

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

一、父传子(props)

二、子传父 (emit) 自定义事件

三、ref()

四、pinia