vue.js $refs和$emit 父子组件交互的方法
作者:axl234 发布时间:2024-04-30 10:19:11
标签:vue,refs,emit
本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码:
<strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父调子" />
<hello ref="chil" />//hello组件
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentCall () {
this.$refs.chil.chilFn('我是父元素传过来的')
}
}
}
</script>
/*Hello.vue :*/
<template>
<div class="hello"></div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilFn (msg) {
alert(msg)
}
}
}
</script>
<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
//ps:App.vue 父组件
//Hello.vue 子组件
<!--App.vue :-->
<template>
<div id="app">
<hello @newNodeEvent="parentLisen" />
</div>
</template>
<script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script>
<!--Hello.vue :-->
<template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="子调父" />
</div>
</template>
<script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>
来源:https://www.cnblogs.com/axl234/p/7797247.html
0
投稿
猜你喜欢
- 一、问题描述当用JS调用form的方法submit直接提交form的时候,submit事件不响应。为什么?知道的请回复。类比一下,我用inp
- 这里介绍一个nii文件保存为png格式的方法。这篇文章是介绍多个nii文件保存为png格式的方法:https://www.jb51.net/
- 引言写这篇文章主要是周末休息太无聊,看了看别人代码,发现基本上要么是多协程下载文件要么就只有单协程的断点续传,所以就试了试有进度条的多协程下
- 一、竞态条件与临界区和同步工具(1)竞态条件一旦数据被多个线程共享,那么就会产生冲突和争用的情况,这种情况被称为竞态条件。这往往会破坏数据的
- 这篇文章主要介绍了python paramiko远程服务器终端操作过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
- 实验目的:用户输入网卡名称,通过函数返回对应的IPv4和IPv6地址。实验代码:步骤一: 由于window系统下网卡名称并不是真正的名字,而
- 两个多月来唯一一次有时间哄么么睡觉,我先给他讲了遍《从前有座山》,还是不睡。又给他讲了这个“保安的故事”:小A是名很敬业的保安,负责保护客户
- 在用 Javascript 验证表单(form)中的单选框(radio)是否选中时,很多新手都会遇到问题,原因是 radio 和普通的文本框
- 使用itertools工具类中的chain方法,可以很方便的将多个iterable对象一起遍历. 不过,对于dict类型的iterable对
- SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的。低级别的隔离级一般支持更高
- 之前在《首都机场的点烟器》中分析了一个软件系统所处的状态并且列举了不同的状态所需要的展示给用户的各类信息,我们先简单回顾一下:要设计一个软件
- 最近需要将实验数据画图出来,由于使用python进行实验,自然使用到了matplotlib来作图。下面的代码可以作为画图的模板代码,代码中有
- 简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img
- 最近准备复现一下 KDD-20 Towards Deeper Graph Neural Networks 的代码,顺便学习一下 GCN 最新
- 问题你的包中包含代码需要去读取的数据文件。你需要尽可能地用最便捷的方式来做这件事。解决方案假设你的包中的文件组织成如下:mypackage/
- 1.前言对于数据库引擎来说,内存是一个性能提升的重要解决手段。把数据缓存起来,可以避免在查询或更新数据时花费多余的时间,而这时间通常是从磁盘
- 要求编写登录接口: 1. 输入用户名和密码2.认证成功后显示欢迎信息3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退
- 在网上搜过发现关于keras下的模型融合框架其实很简单,奈何网上说了一大堆,这个东西官方文档上就有,自己写了个demo:# Function
- python代码包的用途当你想打包一个目录时,需要现在目录中放一个_init_.py,该文件叫包初始化文件,文件可以为空,也可以放一些代码。
- vue配置文件vue.config.js配置前端代理将此代码片段命名为 vue.config.js,放在项目根目录即可仅需修改target属