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.xdnf.cn/news/12560.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

开启鸿蒙开发之旅:核心组件及其各项属性介绍——布局容器组件

写在前面 组件的结构 rkTS通过装饰器 Component 和 Entry 装饰 struct 关键字声明的数据结构&#xff0c;构成一个自定义组件。 自定义组件中提供了一个 build 函数&#xff0c;开发者需在该函数内以链式调用的方式进行基本的 UI 描述 今天我们要学习的就是写在build 函数里的系…

数据结构OJ题

目录 轮转数组原地移除数组中所有元素val删除有序数组中的重复项合并两个有序数组 轮转数组 思路1&#xff1a; 1.利用循环将最后一位数据放到临时变量&#xff08;n&#xff09;中 2.利用第二层循环将数据往后移一位 3.将变量&#xff08;n&#xff09;的数据放到数组第一位 时…

Pencils Protocol 推出新板块 Auction ,为什么重要且被看好?

Pencils Protocol 上线了又一新产品板块 Auction&#xff0c;预示着生态版图的进一步完善&#xff0c;该板块的推出无论是对于 Pencils Protocol 协议本身&#xff0c;还是 Scroll 生态都是极为重要的。 社区正在成为主导加密市场发展的重要力量 自 DeFi Summer 以来&#xf…

Pytorch学习--神经网络--完整的模型训练套路

一、下载数据集 train_data torchvision.datasets.CIFAR10(root"datasets",trainTrue,transformtorchvision.transforms.ToTensor(),downloadTrue) train_data torchvision.datasets.CIFAR10(root"datasets",trainFalse,transformtorchvision.transform…

常用数字器件的描述-组合逻辑器件

目录 基本逻辑门 编码器 译码器 数据选择器 数值比较器 三态缓冲器 奇偶校验器 组合逻辑器件有逻辑门、编码器与译码器、数据选择器和数值比较器、加法器、三态器件和奇偶校验器等多种类型。 基本逻辑门 Verilog HDL中定义了实现七种逻辑关系的基元&#xff0c;例化这些…

在Django中安装、配置、使用CKEditor5,并将CKEditor5录入的文章展现出来,实现一个简单博客网站的功能

在Django中可以使用CKEditor4和CKEditor5两个版本&#xff0c;分别对应软件包django-ckeditor和django-ckeditor-5。原来使用的是CKEditor4&#xff0c;python manager.py makemigrations时总是提示CKEditor4有安全风险&#xff0c;建议升级到CKEditor5。故卸载了CKEditor4&…

高效视觉方案:AR1335与i.MX8MP的完美结合

方案采用NXP i.MX8MP处理器和onsemi AR1335图像传感器&#xff0c;i.MX8MP集成四核Cortex-A53、NPU及双ISP技术。AR1335是一颗分辨率为13M的CMOS传感器。它使用了先进的BSI技术&#xff0c;提供了超高的分辨率和出色的低光性能&#xff0c;非常适合于需要高质量图像的应用。此外…

STM32软件SPI驱动BMP280(OLED显示)

STM32软件SPI驱动BMP280 OLED显示 BMP280简介寄存器简要说明SPI通讯代码逻辑代码展示 现象总结 BMP280简介 数字接口类型&#xff1a;IIC&#xff08;从模式3.4MHz&#xff09;或SPI&#xff08;3线或4线制从模式10MHz&#xff09; 气压测量范围&#xff1a;300&#xff5e;11…

基于Servlet实现MVC

目录 1.MVC相关概念 核心思想&#xff1a; 主要作用&#xff1a; 2.基于Servlet实现MVC 组成部分&#xff1a; 案例 实验步骤&#xff1a; 新建maven项目SpringMvcDemo 删除src目录并添加子模块MvcServlet ​编辑 导入相关依赖&#xff1a; 编写servlet 注册S…

剪辑师必备50多种擦拭转场/光效过渡效果Premiere Pro模板素材

项目特点&#xff1a; Premiere Pro的擦拭转场和光效闪烁过渡效果 Premiere Pro 2023及更高版本 适用于任何FPS和分辨率的照片和视频 易于使用 包含视频教程 无需插件 拖放方法 高品质 提高视频剪辑效率&#xff0c;节省时间&#xff0c;为视频创作添加独特且专业的转场风格。 …

数字化转型的架构蓝图构建指南:从理论到实践的系统实施路径

企业数字化转型的挑战与架构蓝图的重要性 在数字化浪潮的推动下&#xff0c;企业面临着前所未有的转型压力。传统业务模式和运营流程逐渐被更具弹性和敏捷性的数字化模式所取代&#xff0c;而企业架构蓝图作为战略转型的“导航仪”&#xff0c;能够为企业指明方向。企业架构治…

24.11.10

星期一&#xff1a; 补 23ICPC 合肥 G cf传送门 思路&#xff1a;由使第 k个最大这种条件易联想到二分&#xff0c;但是如何check是个问题 check使用dp&#xff0c;先想到个比较朴素的状态设定&#xff0c;dp【i】【j】…

Ubuntu 的 ROS 操作系统turtlebot3环境搭建

引言 本文介绍如何在Ubuntu系统中为TurtleBot3配置ROS环境&#xff0c;包括安装和配置ROS Noetic的步骤&#xff0c;为PC端控制TurtleBot3提供操作指南。 安装和配置的过程分为PC设置、系统安装、依赖安装等部分&#xff0c;并在最后进行网络配置&#xff0c;确保PC端能够顺利…

《深度学习图像分割》第3章:图像分割关键技术组件

《深度学习图像分割》这本书写写停停&#xff0c;历经三年多&#xff0c;目前在二稿修订中。正式出版之前&#xff0c;计划先在GitHub做逐步的内容和代码开源。 以下为本书第3章节选内容&#xff1a; 近年来&#xff0c;基于深度学习的图像分割技术发展迅猛&#xff0c;涌现出大…

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-20

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…

【论文复现】ChatGPT多模态命名实体识别

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ChatGPT ChatGPT辅助细化知识增强&#xff01;1. 研究背景2. 模型结构和代码3. 任务流程第一阶段&#xff1a;辅助精炼知识启发式生成第二阶段…

【拉箱子——模拟+DFS】

题目 代码 #include <bits/stdc.h> using namespace std; map<vector<vector<int>>, int> check; vector<vector<int>> mp; int n, m, ans; int dx[] {1, -1, 0, 0}; int dy[] {0, 0, 1, -1}; void dfs(vector<vector<int>>…

2024 年 Postman 进行 Websocket 接口测试的图文教程

Postman 进行 Websocket 接口测试的图文教程

绘制地理空间矢量场

用 Folium 绘制地理空间矢量场 地学和许多应用领域中&#xff0c;数据的视觉化非常重要。尤其是一些表示方向和速度的矢量数据&#xff0c;例如风速、海流、车速等&#xff0c;使用矢量图进行绘制能够更加直观地表达这些数据的特性。 示例数据集选择 为了便于说明矢量场的绘…

深度伪造检测(Deepfake Detection):识别真假影像的关键技术

随着人工智能技术的进步&#xff0c;深度伪造&#xff08;Deepfake&#xff09;技术迅速发展。深度伪造利用深度学习技术生成高仿真的人脸、声音、影像&#xff0c;使得虚假内容可以几乎以假乱真。这一技术最早用于娱乐和广告领域&#xff0c;但逐渐被不良分子用于制造虚假信息…