一、 provide和inject(依赖注入)
1:在父级组件中提供数据
语法:provide('提供给子组件的变量名',提供给子组件的数据)
2: 在子级组件中获取收据
语法:let nums=inject('父组件传过来的变量名')
二、在Vue3中获取组件实例的方法getCurrentInstance(),需要在父组件中暴露传给子组件的属性或方法defineExpose()
在vue2中获取组件的实例 this
案例
父组件:
<template> <div> <h2>组件的数据传递 provider 和 inject</h2> <!-- 1:在父级组件中提供数据 语法:provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据 语法:let nums=inject('父组件传过来的变量名'); --> <BackTop></BackTop> <Winput></Winput> </div> </template> <script setup> import BackTop from "./HeightComponent/BackTop.vue" import Winput from "./HeightComponent/Winput.vue" import { ref, provide } from 'vue'; let num = ref("200"); provide('num', num) // 让其他组件可以获取到得数据 => 将它暴露出去 const getF=()=>{ console.log(100); } defineExpose({ num,getF }) </script> <style> </style>
// 子组件1 BackTop
<template> <!-- 项目中高频使用的组件 注册成 全局组件 语法: App.component('组件名称',组件) vue项目中 组件 形式 1)vue 文件 =>{} --> <div> 返回头部 {{nums}} </div> </template> <script setup> import {inject} from 'vue' let nums=inject('num'); </script> <style scoped> </style>
// 子组件2 Winput
<template> <div>input</div> </template> <script setup> import { getCurrentInstance } from 'vue'; // 1 搜索到组件他的父亲组件 => app.vue // 2 在搜索组件中获取到父组件中得一些方法和属性 // 获取当前组件实例vue2 this vue3 => getCurrentInstance let {ctx}=getCurrentInstance(); console.log(ctx); console.log(ctx.$parent); </script> <style scoped> </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」