Title
随笔 - 83,  文章 - 0,  评论 - 0,  阅读 - 55559

 一、 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>
复制代码

 

posted on   chccee  阅读(3088)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示