$parent 和 $children的用法

$parent

baseSon.vue

<template><div style="background-color: #999"><h2>儿子金钱:{{ sonMoney }}</h2><button @click="giveFatherMoney(100)">给父亲100</button><button @click="subFatherMoney(5)">拿走父亲5块钱</button></div>
</template><script>
export default {name: "baseSon",props: ["fatherMoney"],data() {return {sonMoney: 200,};},methods: {//   giveFatherMoney(money) {//     this.$parent.fatherMoney += money;//     this.sonMoney -= money;//   },giveFatherMoney (money) {this.$parent.changeFatherMoney(money)},subFatherMoney (money) {this.$parent.fatherMoney -= money}},
};
</script><style></style>


App.vue
<template><div class="app">父亲的钱:{{ fatherMoney }}<baseSon></baseSon><baseDau></baseDau></div>
</template><script>
import baseSon from './components/baseSon.vue';
import baseDau from './components/baseDau.vue';
export default {components:{baseSon,baseDau},data(){return {fatherMoney:10000}},methods:{changeFatherMoney(money){this.fatherMoney += money}}
}</script><style></style>

childern 不好用,所以建议$ref

ref

App.vue

<template><div class="app">父亲的钱:{{ fatherMoney }}<button @click="getSonMoney(50)">父亲拿走儿的50</button><button @click="giveSonMoney(100)">父亲给儿的100</button><baseSon ref="baseSonRef" ></baseSon></div>
</template><script>
import baseSon from './components/baseSon.vue';export default {components:{baseSon},data(){return {fatherMoney:10000}},methods:{changeFatherMoney(money){this.fatherMoney += money},getSonMoney(money){console.log('getSonMoney');// this.$children.sonMoney -= moneythis.$refs.baseSonRef.sonMoney -= money// console.log('this.$children.sonMoney', this.$children.sonMoney);},giveSonMoney(money){this.$refs.baseSonRef.changeSonMoney(money)// this.$children.changeSonMoney(money)}}
}</script><style></style>

baseSon.vue

<template><div style="background-color: #999"><h2>儿子金钱:{{ sonMoney }}</h2><button @click="giveFatherMoney(100)">给父亲100</button><button @click="subFatherMoney(5)">拿走父亲5块钱</button></div>
</template><script>
export default {name: "baseSon",props: ["fatherMoney"],data() {return {sonMoney: 200,};},methods: {//   giveFatherMoney(money) {//     this.$parent.fatherMoney += money;//     this.sonMoney -= money;//   },giveFatherMoney(money) {this.$parent.changeFatherMoney(money)},subFatherMoney(money) {this.$parent.fatherMoney -= money},changeSonMoney(money) {this.sonMoney += money}},
};
</script><style></style>

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

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

相关文章

[C++随笔录] stack queue使用

stack && queue使用 stackqueue题目训练 stack 栈的特点是 先进后出(first in last out) 我们可以看出, stack的接口相比 vector/string/list 的接口少的太多了 构造函数 && 容器适配器 容器适配器的含义: 首先, 适配器 — — 用户传数据进来, 我们用合适的…

mac安装python2

Python 2 于 2020 年 1 月 1 日宣布结束支持&#xff0c;包括 Homebrew 在内的许多项目和包管理器已经停止支持 Python 2。 如果现在你还要安装 Python 2&#xff0c;需要从 Python 官网下载安装包&#xff1a; 访问 Python 的发布页面。从页面底部找到 Python 2 的最后一个版…

DeepSpeed简单教程

DeepSpeed github地址、DeepSpeed 官网 、DeepSpeed API文档、huggingface DeepSpeed文档、知乎deepspeed入门教程、微软deepspeed博客示例代码&#xff1a;《Using DeepSpeed with HF&#x1f917; Trainer》、 BLOOM_LORA&#xff08;运行示例见《Running_Deepspeed》&#x…

C++标准模板(STL)- 输入/输出操纵符-(std::setbase,std::setfill)

操纵符是令代码能以 operator<< 或 operator>> 控制输入/输出流的帮助函数。 不以参数调用的操纵符&#xff08;例如 std::cout << std::boolalpha; 或 std::cin >> std::hex; &#xff09;实现为接受到流的引用为其唯一参数的函数。 basic_ostream::…

人工智能AI 全栈体系(七)

第一章 神经网络是如何实现的 神经网络不仅仅可以处理图像&#xff0c;同样也可以处理文本。由于处理图像讲起来比较形象&#xff0c;更容易理解&#xff0c;所以基本是以图像处理为例讲解的。 七、词向量 图像处理之所以讲起来比较形象&#xff0c;是因为图像的基本元素是像…

Ctfshow web入门 代码审计篇 web301-web310 详细题解 全

CTFshow 代码审计 web301 下载的附件的目录结构如下&#xff1a; 开题后界面&#xff0c;看见输入框&#xff0c;感觉是sql。 大概浏览一遍源码&#xff0c;我们可以发现在checklogin.php文件中有无过滤的SQL语句&#xff0c;SQL注入没得跑了。 这题SQL注入有三种做法。 方法一…

信息安全:网络物理隔离技术原理与应用.

信息安全&#xff1a;网络物理隔离技术原理与应用. 随着网络攻击技术不断增强&#xff0c;恶意入侵内部网络的风险性也相应急剧提高。满足内外网信息及数据交换需求&#xff0c;又能防止网络安全事件出现的安全技术就应运而生了&#xff0c;这种技术称为“物理隔离技术” 基本原…

使用Vue、ElementUI实现登录注册,配置axios全局设置,解决CORS跨域问题

目录 引言 什么是ElementUI&#xff1f; 步骤1&#xff1a;创建Vue组件用于用户登录和注册 1. 基于SPA项目完成登录注册 在SPA项目中添加elementui依赖 在main.js中添加elementui模块 创建用户登录注册组件 配置路由 修改项目端口并启动项目 静态页面展示图 步骤2&#x…

网络爬虫——urllib(1)

前言&#x1f36d; ❤️❤️❤️网络爬虫专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ 前篇简单介绍了什么是网络爬虫及相关概念&#xff0c;这篇开始讲解爬虫中的第一个库——urllib。 urllib&#x1f36d; …

Jenkins学习笔记4

配置构建流程&#xff1a; Jenkins任务创建&#xff1a; 1&#xff09;创建新任务&#xff1a; 把这个Accept first connection改成 No Validation。问题得到解决。 说明下&#xff0c;要确认下主分支的名称是master还是main。 构建触发器这块暂时没有需要配置的。 传输文件…

[FineReport]安装与使用(连接Hive3.1.2)

一、安装(对应hive3.1.2) 注&#xff1a;服务器的和本地的要同时安装。本地是测试环境&#xff0c;服务器的是生产环境 1、服务器安装 1、下载 免费下载FineReport - FineReport报表官网 向下滑找到 2、解压 [rootck1 /home/data_warehouse/software]# tar -zxvf tomcat…

利用C++开发一个迷你的英文单词录入和测试小程序-源码

接上一篇&#xff0c;有了数据库的查询&#xff0c;再把小测试的功能给补足&#xff0c;小程序的结构就出来了。 备注&#xff1a;enable_if 有更优秀的concept C 20替代品&#xff0c;C11 里面提到的any&#xff0c;variant&#xff0c;再C17 已经被纳入了标准库。这里完全可…

软件设计模式系列之十八——迭代器模式

1 模式的定义 迭代器模式是一种行为型设计模式&#xff0c;它允许客户端逐个访问一个聚合对象中的元素&#xff0c;而不暴露该对象的内部表示。迭代器模式提供了一种统一的方式来遍历不同类型的集合&#xff0c;使客户端代码更加简洁和可复用。 2 举例说明 为了更好地理解迭…

瑞云介绍使用ZBrush和Marmoset工具包制作的风格化巨怪战斗机

Renderbus瑞云渲染的小编今天给大家介绍下Gianluca Squillace使用 ZBrush 和 Marmoset 工具包制作巨怪战士的一些技巧。这位艺术家还贴心地告诉大家&#xff0c;有些步骤是可以省略跳过的&#xff0c;这样就可以节省时间&#xff0c;帮助我们快速完成角色的创作啦。快速有用的步…

tp5连接多个数据库

一、如果你的主数据库配置文件都在config.php里 直接在config.php中中定义db2&#xff1a; 控制器中打印一下&#xff1a; <?php namespace app\index\controller; use think\Controller; use think\Db; use think\Request; class Index extends Controller {public fun…

腾讯mini项目-【指标监控服务重构-会议记录】2023-07-06

7/6 会议记录 Profile4个步骤 解压kafka消息初始化性能事件&#xff0c;分析事件将数据写入kafkaRun 开始执行各stage handler 上报耗时到otel-collector。。。 // ConsumerDispatchHandler consumer // // param msg *sarama.ConsumerMessage // param consumer *databus.K…

Spring实现简单的Bean容器

1.BeanDefinition&#xff0c;用于定义 Bean 实例化信息&#xff0c;现在的实现是以一个 Object 存放对象 public class BeanDefinition {/*** bean对象*/private Object bean;/*** 存放 &#xff08;定义&#xff09;Bean 对象*/public BeanDefinition(Object bean) {this.bea…

折线图geom_line()参数选项

往期折线图教程 图形复现| 使用R语言绘制折线图折线图指定位置标记折线图形状更改 | 绘制动态折线图跟着NC学作图 | 使用python绘制折线图 前言 我们折线的专栏推出一段时间&#xff0c;但是由于个人的原因&#xff0c;一直未进行更新。那么今天&#xff0c;我们也参考《R语…

吃鸡达人分享顶级作战干货,让你的战斗力爆表!

大家好&#xff01;作为一位专业吃鸡行家&#xff0c;我将为大家分享一些热门话题和实用干货&#xff0c;帮助你提高游戏的战斗力&#xff0c;让你在绝地求生中立于不败之地&#xff01; 首先&#xff0c;让我们来谈谈绝地求生作图工具推荐。我们推荐使用一款专业的作图工具&am…

SpringMVC 学习(一)Servlet

本系列文章为【狂神说 Java 】视频的课堂笔记&#xff0c;若有需要可配套视频学习。 1. Hello Servlet (1) 创建父工程 删除src文件夹 引入一些基本的依赖 <!--依赖--> <dependencies><dependency><groupId>junit</groupId><artifactId>…