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
投稿
猜你喜欢
- vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$onvm.$on( event, cal
- 1. JSON简介JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它是JavaScript的子
- 本文实例讲述了python生成器/yield协程/gevent写简单的图片下载器功能。分享给大家供大家参考,具体如下:1、生成器:'
- Django 分页功能的实现,供大家参考,具体内容如下创建项目创建APP,添加APP这些就不在多说我们这次重点来看到视图函数下面是路由设置视
- 本文实例为大家分享了python版DDOS攻击脚本,供大家参考,具体内容如下于是就找到了我之前收藏的一篇python的文章,是关于ddos攻
- 在用户注册中最常见的安全验证之一就是邮箱验证。根据行业的一般做法,进行邮箱验证是避免潜在的安全隐患一种非常重要的做法,现在就让我们来讨论一下
- 什么是Densenet据说Densenet比Resnet还要厉害,我决定好好学一下。ResNet模型的出现使得深度学习神经网络可以变得更深,
- 有一个需求就是需要对url进行进一步的划分得到详细的各个字段信息,下面是简单的实现:#!/usr/bin/python# -*- codin
- import threadingfrom time import sleepdef test_func(id): &n
- 很多开发人员在刚开始学Python 时,都考虑过像 c++ 那样来实现 singleton 模式,但后来会发现 c++ 是 c++,Pyth
- VScode查看python f.write()的文件乱码在使用 VScode 编写 python 代码,print(),汉字正常显示,使用
- 使用cv2.imread(),cv2.imshow(),cv2.imwrite()读取、显示和保存图像一、读入图像使用函数cv2.imrea
- 在pandas.Series的pandas.DataFrame列中,将描述获取唯一元素数(不包括重复项的案例数)和每个元素的出现频率(出现数
- 前言最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备。如果对 Vue SSR
- 目录1、分布式事务2、SAGA3、SAGA 实践4、处理网络异常5、处理回滚6、小结银行跨行转账业务是一个典型分布式事务场景,假设 A 需要
- 1、生成器函数包含yield from表达式。2、在yield from表达式处暂停委派生成器,调用方可直接将数据发送给子生成器。3、子生成
- 一、平稳序列建模步骤假如某个观察值序列通过序列预处理可以判定为平稳非白噪声序列,就可以利用ARMA模型对该序列进行建模。建模的基本步骤如下:
- 在web开发中经常用到验证码,为了防止机器人注册或者恶意登陆和查询等,作用不容小觑但是验证码其实不是一个函数就能搞定的,它需要生成图片和水印
- 触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程。触发器主要是通过事件进行触发被自动调用执行的。而存储过程可以通过存储过程的
- 无论是 DAO 还是 ADO 都有两种从 Recordset 对象中查询记录的方法: Find 方法和 Seek 方法。在这两种方法中可以让