Vue 常见通信

server/2024/11/14 13:13:09/

Vue 常见通信
1、父子通信

父传子 props,子传父 events($emit);

通过父链 / 子链 通信$parent / $children;

$refs获取ref 可以访问组件实例方法,;

提供与注射provide / inject

a t t r s / attrs/attrs/listeners;

2、兄弟通信
Bus;
Vuex;

provide / inject
v2写法与v3不同需注意。v3官方API你值得拥有与阅读:https://cn.vuejs.org/guide/components/provide-inject.html
扛起大枪一起突突突突!
出现原因:解决prop 逐级透传 父一级与子N级传值获取的麻烦。
v2官方解释:provide 和 inject 绑定并不是可响应的(字符串类型的值)。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

**v2 string**
// 父组件
data() {return {name: "卷儿"}},provide: function() {return {newName: () => this.name}// 子组件
inject: ['newName'],
computed: {hnewName() {return this.newName()}}
<!-- 子组件中的使用方式 -->
<h2>{{ hnewName }}</h2> <!-- 推荐使用这种方法 -->
<h2>{{ newName() }}</h2>**v2 obj**
// 父组件
data() {return {obj: {name: "卷儿"}}},provide: function() {return {// 传递一个对象obj: this.obj}},// 子组件
inject: ['obj'],
computed: {// 也可以不用计算属性重新定义objName() {return this.obj.name}}<!-- 子组件中的使用方法 -->
<h2>obj的name: {{objName}}</h2>
<h2>obj的name: {{obj.name}}</h2>
V3采用ts语法,等我先学习一下哈哈哈哈。溜了溜了。

http://www.ppmy.cn/server/41815.html

相关文章

vscode切换分支及合并分支操作教程

工具&#xff1a;gitee、git 、vscode、Git Graph 点击可以看到分支管理明细。 一、前提 1、首先要有两个分支 &#xff08;1&#xff09;分支说明&#xff1a; test&#xff1a; 测试分支 feature/luo-20240508&#xff1a;自己的开发分支 &#xff08;2&#xff09;分支说…

npm无法安装node-sass 的问题

安装 node-sass 的问题呈现&#xff1a;4.9.0版本无法下载 Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-72_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.0/win32-x64-…

【Git教程】(十八)拆分大项目 — 概述及使用要求,执行过程及其实现,替代解决方案 ~

Git教程 拆分大项目 1️⃣ 概述2️⃣ 使用要求3️⃣ 执行过程及其实现3.1 拆分模块版本库3.2 将拆分出的模块作为外部版本库集成 4️⃣ 替代解决方案 通常软件项目都是由单体小型系统开始的&#xff0c;在开发过程中项目规模和团队人员不断扩大&#xff0c; 将项目模块化会显得…

idea使用gitee基本操作流程

1.首先&#xff0c;每次要写代码前&#xff0c;先切换到自己负责的分支 点击签出。 然后拉取一次远程master分支&#xff0c;保证得到的是最新的代码。 写完代码后&#xff0c;在左侧栏有提交按钮。 点击后&#xff0c;选择更新的文件&#xff0c;输入描述内容&#xff08;必填…

正则表达式和lambda表达式

正则表达式&#xff08;Regular Expressions&#xff09;和Lambda表达式虽然都包含“表达式”一词&#xff0c;但它们在编程中的作用和用法是完全不同的。让我们详细比较一下它们的定义、用途和应用场景&#xff1a; 正则表达式 定义&#xff1a;正则表达式是一种用于匹配文本…

知识分享|XDC时钟约束的详细说明

在FPGA设计中&#xff0c;时钟约束是确保设计满足时序要求的关键。Xilinx Design Constraints (XDC) 文件允许设计者对时钟、输入/输出(I/O)和跨时钟域(CDC)路径进行精确的时序约束。以下是XDC文件中时钟约束的详细说明&#xff1a; 时钟约束的重要性 时钟约束必须最早创建&a…

业务上云--从Container+BuildKitd打镜像到在Kubernetes上部署LNMP

一、背景 在基于kubeasz部署kubernetes高可用集群-CSDN博客文章部署的kubernetes集群上部署LNMP 1.1、Kubernetes环境 1.2、Harbor环境 【docker基础】使用Harbor搭建私有仓库-docker-compose使用示例--第二周作业_harbor docker-compose-CSDN博客 Harbor环境升级&#xff…

音视频-H264编码封装- MP4格式转Annex B格式

目录 1&#xff1a;H264语法结构回顾 2&#xff1a;H264编码补充介绍 3&#xff1a;MP4模式转Annex B模式输出到文件示例 1&#xff1a;H264语法结构回顾 在之前文章里介绍过H264的语法结构。 传送门: 视音频-H264 编码NALU语法结构简介 2&#xff1a;H264编码补充介绍 H…