乐趣区

关于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
退出移动版