vue3的组件间通信方式

摘要

props-父子组件之间通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！父组件给子组件传递数据 Child info=我爱祖国 :money=money /Child 子组件获取父组件传递数据:方式1 let props = defineProps({ info:{ type:...

vue3的组件间通信方式

父子组件之间-props

通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！

父组件给子组件传递数据

<Child info="我爱祖国" :money="money"></Child>

子组件获取父组件传递数据:方式1

let props = defineProps({
  info:{
 &nbsp; type:String,//接受的数据类型
 &nbsp; default:'默认参数',//接受默认数据
  },
  money:{
 &nbsp; type:Number,
 &nbsp; default:0
}})

子组件获取父组件传递数据:方式2

let props = defineProps(["info",'money']);

子组件获取到props数据就可以在模板中使用了,但是切记props是只读的(只能读取，不能修改)

父子组件之间-ref与$parent

ref,提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。

比如:在父组件挂载完毕获取组件实例
父组件内部代码:

<template>
  <div>
 &nbsp;  <h1>ref与$parent</h1>
 &nbsp;  <Son ref="son"></Son>
  </div>
</template>
<script setup lang="ts">
import Son from "./Son.vue";
import { onMounted, ref } from "vue";
const son = ref();
onMounted(() => {
  console.log(son.value);
});
</script>

但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问

<script setup lang="ts">
import { ref } from "vue";
//数据
let money = ref(1000);
//方法
const handler = ()=>{
}
defineExpose({
  money,
 &nbsp; handler
})
</script>

$parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露.

<button @click="handler($parent)">点击我获取父组件实例</button>

父子组件之间-slot插槽

插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.

默认插槽:

在子组件内部的模板中书写slot全局组件标签

<template>
  <div>
 &nbsp;  <slot></slot>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件
注意开发项目的时候默认插槽一般只有一个

<Todo>
  <h1>我是默认插槽填充的结构</h1>
</Todo>

具名插槽：

顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。
下面是一个子组件内部,

<template>
  <div>
 &nbsp;  <h1>todo</h1>
 &nbsp;  <slot name="a"></slot>
 &nbsp;  <slot name="b"></slot>
  </div>
</template>
<script setup lang="ts">
</script>

<style scoped>
</style>

父组件内部向指定的具名插槽传递结构。需要注意v-slot：可以替换为#

<template>
  <div>
 &nbsp;  <h1>slot</h1>
 &nbsp;  <Todo>
 &nbsp; &nbsp;  <template v-slot:a>  //可以用#a替换
 &nbsp; &nbsp; &nbsp;  <div>填入组件A部分的结构</div>
 &nbsp; &nbsp;  </template>
 &nbsp; &nbsp;  <template v-slot:b>//可以用#b替换
 &nbsp; &nbsp; &nbsp;  <div>填入组件B部分的结构</div>
 &nbsp; &nbsp;  </template>
 &nbsp;  </Todo>
  </div>
</template>

<script setup lang="ts">
import Todo from "./Todo.vue";
</script>
<style scoped>
</style>

作用域插槽

作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)
子组件Todo代码如下:

<template>
  <div>
 &nbsp;  <h1>todo</h1>
 &nbsp;  <ul>
 &nbsp; &nbsp; <!--组件内部遍历数组-->
 &nbsp; &nbsp;  <li v-for="(item,index) in todos" :key="item.id">
 &nbsp; &nbsp; &nbsp; &nbsp; <!--作用域插槽将数据回传给父组件-->
 &nbsp; &nbsp; &nbsp; &nbsp; <slot :$row="item" :$index="index"></slot>
 &nbsp; &nbsp;  </li>
 &nbsp;  </ul>
  </div>
</template>
<script setup lang="ts">
defineProps(['todos']);//接受父组件传递过来的数据
</script>
<style scoped>
</style>

父子组件之间-useAttrs

在Vue3中可以利用useAttrs方法获取组件的属性与事件(包含:原生DOM事件或者自定义事件),次函数功能类似于Vue2框架中$attrs属性与$listeners方法。

比如:在父组件内部使用一个子组件my-button

<my-button type="success" size="small" title='标题' @click="handler"></my-button>

子组件内部可以通过useAttrs方法获取组件属性与事件.因此你也发现了，它类似于props,可以接受父组件传递过来的属性与属性值。需要注意如果defineProps接受了某一个属性，useAttrs方法返回的对象身上就没有相应属性与属性值。

<script setup lang="ts">
import {useAttrs} from 'vue';
let $attrs = useAttrs();
</script>

父子组件之间-v-model

v-model指令可是收集表单数据(数据双向绑定)，除此之外它也可以实现父子组件数据同步。
而v-model实指利用props[modelValue]与自定义事件[update:modelValue]实现的。

下方代码:相当于给组件Child传递一个props(modelValue)与绑定一个自定义事件update:modelValue
实现父子组件数据同步

<Child v-model="msg"></Child>

在vue3中一个组件可以通过使用多个v-model,让父子组件多个数据同步,下方代码相当于给组件Child传递两个props分别是pageNo与pageSize，以及绑定两个自定义事件update:pageNo与update:pageSize实现父子数据同步

<Child v-model:pageNo="msg" v-model:pageSize="msg1"></Child>

隔辈组件之间（非兄弟组件）-provide与inject

provide[提供] inject[注入]
vue3提供两个方法provide与inject,可以实现隔辈组件传递参数

provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value

<script setup lang="ts">
import {provide} from 'vue'
provide('token','admin_token');
</script>

后代组件可以通过inject方法获取数据,通过key获取存储的数值

<script setup lang="ts">
import {inject} from 'vue'
let token = inject('token');
</script>

任何组件之间-pinia

pinia也是集中式管理状态容器,类似于vuex。但是核心概念没有mutation、modules。

pinia官网:https://pinia.web3doc.top/

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：