1、ref与$parent
ref可以获取元素的DOM或者获取可以在父组件内部通过ref获取子组件实例， 子组件内部的方法与响应式数据父组件可以使用的。
比如:在父组件挂载完毕获取组件实例
父组件内部代码:
<template> <div> <h1>ref与$parent</h1> <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, handler }) </script>
$parent可以获取某一个组件的父组件实例,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露
<button @click="handler($parent)">点击我获取父组件实例</button>
2、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>
3、pinia
pinia官网:https://pinia.web3doc.top/
pinia也是集中式管理状态容器,类似于vuex。但是核心概念没有mutation、modules,使用方式参照官网
4、slot
插槽：默认插槽、具名插槽、作用域插槽可以实现父子组件通信.
默认插槽:
在子组件内部的模板中书写slot全局组件标签
<template> <div> <slot></slot> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>
在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件
注意开发项目的时候默认插槽一般只有一个
<Todo> <h1>我是默认插槽填充的结构</h1> </Todo>
具名插槽：
顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。
下面是一个子组件内部,模板中留两个插槽
<template> <div> <h1>todo</h1> <slot name="a"></slot> <slot name="b"></slot> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>
父组件内部向指定的具名插槽传递结构。需要注意v-slot：可以替换为#
<template> <div> <h1>slot</h1> <Todo> <template v-slot:a> //可以用#a替换 <div>填入组件A部分的结构</div> </template> <template v-slot:b>//可以用#b替换 <div>填入组件B部分的结构</div> </template> </Todo> </div> </template> <script setup lang="ts"> import Todo from "./Todo.vue"; </script> <style scoped> </style>
作用域插槽
作用域插槽：可以理解为，子组件数据由父组件提供，但是子组件内部决定不了自身结构与外观(样式)
子组件Todo代码如下:
<template> <div> <h1>todo</h1> <ul> <!--组件内部遍历数组--> <li v-for="(item,index) in todos" :key="item.id"> <!--作用域插槽将数据回传给父组件--> <slot :$row="item" :$index="index"></slot> </li> </ul> </div> </template> <script setup lang="ts"> defineProps(['todos']);//接受父组件传递过来的数据 </script> <style scoped> </style>
父组件内部代码如下:
<template> <div> <h1>slot</h1> <Todo :todos="todos"> <template v-slot="{$row,$index}"> <!--父组件决定子组件的结构与外观--> <span :style="{color:$row.done?'green':'red'}">{{$row.title}}</span> </template> </Todo> </div> </template> <script setup lang="ts"> import Todo from "./Todo.vue"; import { ref } from "vue"; //父组件内部数据 let todos = ref([ { id: 1, title: "吃饭", done: true }, { id: 2, title: "睡觉", done: false }, { id: 3, title: "打豆豆", done: true }, ]); </script> <style scoped> </style>
