vue 依赖注入(Provide、Inject )和混入(mixins)

Prop 逐级透传问题​

通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦:

Provide (提供)​

要为组件后代提供数据,需要使用到 provide 选项:

export default {data() {return {message: 'hello!'}},provide() {// 使用函数的形式,可以访问到 `this`return {message: this.message}}
}

Inject (注入)​

要注入上层组件提供的数据,需使用 inject 选项来声明:

export default {inject: ['message'],created() {console.log(this.message) // injected value}
}

mixins 

mixin定义

定义mixin也非常简单,它就是一个对象而已,只不过这个对象里面可以包含Vue组件中的一些常见配置,如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹,然后新建index.js文件,该文件存放我们的mixin代码。


// src/mixin/index.js
export const mixins = {data() {return {msg: "我是小猪课堂",};},computed: {},created() {console.log("我是mixin中的created生命周期函数");},mounted() {console.log("我是mixin中的mounted生命周期函数");},methods: {clickMe() {console.log("我是mixin中的点击事件");},},
};

局部混入

我们的公共mixin定义好后,最重要就是如何使用它。根据不同的业务场景,我们可以分为两种:局部混入和全局混入。顾名思义,局部混入和组件的按需加载有点类似,就是需要用到mixin中的代码时,我们再在组件章引入它。全局混入的话,则代表我在项目的任何组件中都可以使用mixin。

组件中引入mixin也非常简单,我们稍微改造下App.vue组件。

// src/App.vue
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><button @click="clickMe">点击我</button></div>
</template><script>
import { mixins } from "./mixin/index";
export default {name: "App",mixins: [mixins],components: {},created(){console.log("组件调用minxi数据",this.msg);},mounted(){console.log("我是组件的mounted生命周期函数")}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++零基础入门知识点

名字空间&#xff08;namespace)的引入和使用 名字空间域是随标准C而引入的。它相当于一个更加灵活的文件域&#xff08;全局域&#xff09;&#xff0c;可以用花括号把文件的一部分括起来&#xff0c;并以关键字namespace开头给它起一个名字 //TestMain.cpp //1. 普通的命名空…

手机上用什么方法可以切换ip

手机上用什么方法可以切换IP&#xff1f;在某些特定情境下&#xff0c;用户可能需要切换手机的IP地址&#xff0c;以满足网络安全、隐私保护或绕过地域限制等需求。下面以华为手机为例&#xff0c;将详细介绍手机IP地址切换的几种方法&#xff0c;帮助用户轻松实现这一目标。 一…

全面解析 Python typing模块与静态类型注解:从基础到高级

在现代软件开发中&#xff0c;代码的可读性、维护性和可靠性至关重要。Python 作为一门动态类型语言&#xff0c;尽管灵活&#xff0c;但也可能带来一些类型上的困扰。Python 的 typing 模块和静态类型注解提供了一种在编写代码时明确类型信息的方法&#xff0c;从而提升代码质…

一个强大的Stable Diffusion comfyUI 工作流,能实现写真自由、各种风格融合、面部特征一致性等等

今天&#xff0c;我们将向您介绍一款非常实用的工具——Stable Diffusion comfyUI工作流。这款工作流基于Stable Diffusion技术&#xff0c;旨在为您提供一键式生成图像的便捷体验。无论您是AI绘画的新手还是专业人士&#xff0c;这个工作流都能为您带来极大的便利。 在这个教…

【测试】【Debug】pytest运行后print没有输出

import pytest def test_good():for i in range(1000):print(i)def test_bad():print(this should fail!)assert False比如上述程序&#xff0c;运行之后只能看到输出了’this should fail!&#xff1b;但是debug版的测试运行后又能看到test_good函数中的输出。 这是为什么呢&a…

外泌体相关基因肝癌临床模型预测——2-3分纯生信文章复现——6.外泌体基因功能注释(二)

内容如下: 1.外泌体和肝癌TCGA数据下载 2.数据格式整理 3.差异表达基因筛选 4.预后相关外泌体基因确定 5.拷贝数变异及突变图谱 6.外泌体基因功能注释 7.LASSO回归筛选外泌体预后模型 8.预后模型验证 9.预后模型鲁棒性分析 10.独立预后因素分析及与临床的相关性分析…

【Homework】【1--4】Learning resources for DQ Robotics in MATLAB

Learning resources for DQ Robotics in MATLAB Lesson 1 代码 % Step 2: Define the real numbers a1 and a2 a1 123; a2 321;% Step 3: Calculate and display a3 a1 a2 a3 a1 a2; disp([a3 (a1 a2) , num2str(a3)])% Step 4: Calculate and display a3 a1 * a2 a3…

ORACLE RAC用DNS服务器的配置

一、搭建本地YUM源 二、安装DNS全部组建 yum -y install bind* 三、规划您RAC集群所有IP #public 192.168.16.111 rac1.ntt.com rac1 192.168.16.112 rac2.ntt.com rac2 192.168.16.121 rac3.ntt.com rac3 192.168.16.122 rac4.ntt.com rac4 #private 10.10.10.111 rac1-pr…

Redis穿透、击穿、雪崩

redis是一款常用的非关系型数据库&#xff0c;我们常用与作为数据缓存的组件。 接下来介绍一下面试中常被问到的三个概念以及简单的解决方法。 穿透 什么叫缓存穿透 缓冲穿透&#xff0c;是当有一个请求过来时&#xff0c;查询redis缓存不存在&#xff0c;又去查询数据库&…

前向-后向卡尔曼滤波器(Forward-Backward Kalman Filter)资料汇总

《卡尔曼滤波引出的RTS平滑》参考位置2《卡尔曼滤波系列——&#xff08;六&#xff09;卡尔曼平滑》《关于卡尔曼滤波和卡尔曼平滑关系的理解》——有m语言例程《Forward Backwards Kalman Filter》——Matlab软件《卡尔曼滤波与隐马尔可夫模型》

linux命令详解,存储管理相关

存储管理 一、内存使用量&#xff0c;free free 命令是一个用于显示系统中物理内存&#xff08;RAM&#xff09;和交换空间&#xff08;swap&#xff09;使用情况的工具 free -m free -m -s 5参数 -b 功能: 以字节&#xff08;bytes&#xff09;为单位显示内存使用情况。说…

PHP API的路由设计思路

PHP API的路由设计是构建高效、可维护API的关键环节。以下是一套完整的PHP API路由设计思路&#xff1a; 一、明确设计原则 使用统一资源标识符&#xff08;URI&#xff09;&#xff1a;通过URI来标识资源&#xff0c;确保每个资源都有一个唯一的地址。使用HTTP方法&#xff…

推荐一款功能强大的视频修复软件:Apeaksoft Video Fixer

Apeaksoft Video Fixer是一款功能强大的视频修复软件&#xff0c;专门用于修复损坏、不可播放、卡顿、画面失真、黑屏等视频问题。只需提供一个准确且有效的样本视频作为参考&#xff0c;该软件就能将受损视频修复到与样本视频相同的质量。该软件目前支持MP4、MOV、3GP等格式的…

Redis如何保证数据不丢失(可靠性)

本文主要以学习为主&#xff0c;详细参考&#xff1a;微信公众平台 Redis 保证数据不丢失的主要手段有两个&#xff1a; 持久化 多机部署 我们分别来看它们两的具体实现细节。 1.Redis 持久化 持久化是指将数据从内存中存储到持久化存储介质中&#xff08;如硬盘&#xf…

第三十九章 基于VueCli自定义创建项目

目录 1. 选择创建模式 2. 选择需要的功能 3. 选择历史模式还是哈希模式 ​4.CSS预处理器 5. 选择ESLint规则 6. 开始创建项目 ​7. 自定义项目最终结构 1. 选择创建模式 输入创建的项目名&#xff0c;创建项目&#xff1a; 这里选择自定义模式&#xff1a; 2. 选择需要…

【Vue3】基础语法案例

图片点击轮播 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>图片轮播</title> </head><body><div id"app"><h3>{{ number }}</h3><!-- 通过模板字…

16.useForm

在 React 应用中,处理表单状态是一个常见但有时复杂的任务。每个表单字段通常需要自己的状态和更新逻辑,这可能导致代码重复和难以维护。useForm 钩子提供了一种简洁的方法来管理整个表单的状态,大大简化了表单处理过程。这个自定义钩子不仅减少了样板代码,还提高了表单处理…

CentOS8.4 部署 k8s 1.31.2

文章目录 配置 aliyun 源配置时间同步查看 安装 docker下载一些必备工具配置 aliyun 的源更新源删除旧的 podman安装 docker设置开机启动 配置 hosts 表多主机协同可以不写 关闭 swap 分区配置 iptables配置 k8s 源初始化 master 节点初始化 node 节点 查看集群状态 [!warning]…

【大数据学习 | kafka高级部分】kafka的kraft集群

首先我们分析一下zookeeper在kafka中的作用 zookeeper可以实现controller的选举&#xff0c;并且记录topic和partition的元数据信息&#xff0c;帮助多个broker同步数据信息。 在新版本中的kraft模式中可以这个管理和选举可以用kafka自己完成&#xff0c;而不再依赖zookeeper。…

CTF-WEB:php函数杂记(手册)持续更新

exif_imagetype() exif_imagetype 是 PHP 中的一个函数&#xff0c;用于判断图像文件的类型。它通过读取图像文件的前几个字节来推断文件类型&#xff0c;而无需依赖文件扩展名。这在处理文件上传时特别有用&#xff0c;因为文件扩展名可能会被伪造。 函数原型 exif_imagety…