首页 > 其他分享 >vue3 祖孙通信

vue3 祖孙通信

时间:2023-06-08 18:12:52浏览次数:47  
标签:grandFatherFun const provide 通信 grandFatherData inject vue3 组件 祖孙

利用provide和inject 

 provide用于向子组件(或子组件中的子组件,无限嵌套)提供自身的一些数据,或者将自身所有属性全部提供,但是提供的数据均为非响应式数据。

 inject用于引入父级组件所提供的数据

 

1、祖父组件

import {ref, reactive,provide} from "vue";

const grandFatherData = ref('我是祖父组件数据');
const grandFatherFun = ()=>{
    console.log("我是祖父组件方法")
}
 provide('grandFatherData1',grandFatherData.value ); //将数据和方法导出
 provide('grandFatherFun1',grandFatherFun );

 

2、孙子组件

import {ref, reactive,inject} from "vue";

const fun = inject('grandFatherFun') // 接受
const data = inject('grandFatherData');

const getGrandFatherData = ()=>{
    fun(); //调用方法
    console.log(data); //调用数据
}

 

标签:grandFatherFun,const,provide,通信,grandFatherData,inject,vue3,组件,祖孙
From: https://www.cnblogs.com/symlove/p/17467306.html

相关文章

  • uniapp+微信小程序+vue3 实现富文本编辑器遇到的坑
     问题一:富文本编辑器初始化实例出不来,有两个原因:找的参考代码不适用微信小程序,需要用.in(this)uni.createSelectorQuery().in(this).select("#editor").context(res=>{this.editorCtx=res?.context;}).ex......
  • vue3中使用less
    在Vue3中使用Less(LeanerStyleSheets)可以通过以下步骤完成:安装less和less-loader:首先,你需要安装Less和LessLoader依赖。在Vue项目的根目录下,可以使用npm或yarn运行以下命令来安装它们:npminstalllessless-loader或yarnaddlessless-loader配置webpack:VueCLI默认......
  • 车载测试三大通信协议
    CAN、LIN和FlexRay是常见汽车通信的协议。它们被广泛应用于现代汽车中,实现内部通信和控制系统。1.CAN(ControllerAreaNetwork)协议CAN协议是一种广泛使用的实时通信协议,旨在汽车电子系统中实现高可靠性通信。它最早是由德国的Bosch公司开发的,现已成为汽车行业的标准协议之一......
  • Vue3从入门到精通(二)
    vue3侦听器在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。创建侦听器可以使用watch选项或$watch方法来创建侦听器,语法与Vue2相同。示例如下:<template><div>{{messa......
  • 轻松实现物联网通信的利器:MQTT网关神器——FluxMQ
    FluxMQ—引领物联网新时代的高性能MQTT网关随着物联网技术的快速发展,人们越来越意识到实时、可靠、安全的数据传输对于智能化的生产与生活的重要性。因此,市场对于高性能的物联网数据传输解决方案有着强烈的需求。FluxMQ正是为满足这一需求而诞生的一款高性能、可靠且易于使用的MQ......
  • 通信三要素:协议-TCP
          ......
  • 【FSK通信】调频fsk通信系统附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • vue3实现自定义指令
    创建一个empty.jsimport{nextTick}from'vue';constemptyImgUrl=newURL('@/assets/images/empty-icon.jpeg',import.meta.url).href;//在vue3中不支持require引入静态图片,这是一种引入方式另外一种是直接importconstempty={install(app,options){app......
  • Vue3 之 响应式 API reactive、 effect源码,详细注释
    Vue3之响应式APIreactive、effect源码,详细注释目录一.实现响应式API:reactive、shallowReactive、readonly、shallowReadonly1.针对不同的API创建不同的响应式对象2.实现createReactiveObject3.实现不同的拦截函数baseHandlers.ts二.实现响应式effect1.创建响应式的......
  • vue3 mock接口
    以下基于mock的vite-plugin-mock版本为2.9.6实现,其他版本有可能导致报错1.安装依赖:https://www.npmjs.com/package/[email protected].在vite.config.js配置文件启动插件//mock插件提供的方法import{viteMockServe}f......