vue 父组件中调用子组件函数
2019/06/06
在父组件中调用子组件的方法:
1.给子组件定义一个ref属性。eg:ref="childItem"
2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}
2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。
父组件:
<template>
<child-item ref='child' />
<button @click='useChildFun'></button>
</template>
<script>
```
methods() {
useChildFun:function(){
this.$refs.child.usedInPar('调用子组件中的方法');
}
}
</script>
子组件:
```
methods () {
usedInPar(str){
console.log(str);
}
}
没有完整的代码,只有一个用法
vue 父组件中调用子组件函数的更多相关文章
- React Hooks中父组件中调用子组件方法
React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...
- Vue父组件如何调用子组件(弹出框)中的方法的问题
如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父组件如何调用子组件的属性或方法
常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...
- (转)C#在父窗口中调用子窗口的过程(无法访问已释放的对象)
C#在父窗口中调用子窗口的过程: 1. 创建子窗口对象 2. 显示子窗口对象 笔者的程序中,主窗体MainFrm通过菜单调用子窗口ChildFrm.在窗体中定义了子窗口对象,然后在菜单项点击事件中 ...
- C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常,不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。
一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...
- vue父组件中获取子组件中的数据
<FormItem label="上传头像" prop="image"> <uploadImg :width="150" ...
随机推荐
- python系列之(3)爬取豆瓣图书数据
上次介绍了beautifulsoup的使用,那就来进行运用下吧.本篇将主要介绍通过爬取豆瓣图书的信息,存储到sqlite数据库进行分析. 1.sqlite SQLite是一个进程内的库,实现了自给自足 ...
- [React Native]Promise机制
React Native中经常会看到Promise机制. Promise机制代表着在JavaScript程序中下一个伟大的范式.可以把一些复杂的代码轻松撸成一个串,和Android中的rxjava非常 ...
- 将nginx搜集到的日志通过flume转到hive
背景介绍: Nginx为app打点数据,打点日志每小时滚动一次.目录结构如下 文件中的数据如下( cat -A 2019072414r.log 后的结果,-A为显示隐形的符号,下方^A为指定的分隔符. ...
- KiCad 5.1.0 镜像圆弧后错位问题
KiCad 5.1.0 镜像圆弧后错位问题 看官方回复这个问题将在 5.1.3 进行修复,因为这段时间在举行 KiCon 活动. 看到这个问题并不是非常严重,不是致命的,所以已经从 5.1.0 跳到 ...
- sql:mysql:函数:TIMESTAMPDIFF函数实现TimeStamp字段相减,求得时间差
函数内指定是minute,则最终结果value值的单位是分钟,如果函数内指定为hours,则最终结果value值单位为小时. //UPLOAD_TIME 减去 CREATE_DTTM 求得时间差,以分 ...
- 自定义View系列教程07--详解ViewGroup分发Touch事件
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- dataframe构建
data=[[[0],1]]df = pd.DataFrame(data, columns=['col1', 'col2']) df = pd.DataFrame({‘col1’:‘’,‘col2’: ...
- 2019-8-31-dotnet-通过-WMI-拿到显卡信息
title author date CreateTime categories dotnet 通过 WMI 拿到显卡信息 lindexi 2019-08-31 16:55:58 +0800 2019- ...
- oracle函数 NLS_INITCAP(x[,y])
[功能]返回字符串并将字符串的第一个字母变为大写,其它字母小写; [参数]x字符型表达式 [参数]Nls_param可选, 查询数据级的NLS设置:select * from nls_database ...
- 《attention is all you need》解读
Motivation: 靠attention机制,不使用rnn和cnn,并行度高 通过attention,抓长距离依赖关系比rnn强 创新点: 通过self-attention,自己和自己做atten ...