vue 子组件调用父组件的方法
vue中 父子组件的通信:
子组件通过
props: { //子组件中写的。
childMsg: { //字段名
type: Array,//类型
default: [0,0,0] //这样可以指定默认的值
}
}
父组件的话,直接就可以写在 子组件的标签上。比如 childMsg="1,1,1 " ,这样就可以了。
子组件调用父组件的方法可以使用this.$emit() 这个方法。。
<el-col :span="16" class="history_text" v-text="item" @click.native="choose(item)"></el-col>
choose(text){
this.$emit("clickSearch",text);
},
这个是父组件的内容,这样写。。。
<search-history v-if="showHistory" @clickSearch="clickSearch"></search-history> //serach-history 是子组件的标签名字。 clickSearch(text){
this.search_text =text; //这里是父组件变量设置
this.search(); //方法调用
this.searchBlur();
}
这样写。choose是子组件中自己的点击方法,clickSearch 这个是父组件中绑定的事件名字,text 是子组件传的值 。。
切记 父组件监听的事件必须写在 子组件的标签上,不然是监听不到的。
vue 子组件调用父组件的方法的更多相关文章
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue.js(19)--vue中子组件调用父组件的方法
子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...
随机推荐
- [Linux]权限s权限和t权限
问题 在<Unix高级编程>第4.9章节中描述了函数chmod()的参数mode常量值 当中S_ISUID.S_ISGID.S_ISVTX三个常量让人困惑. 分析 通过查阅文档,发现这几个 ...
- H - 栀子花开
这是一个栀子花开的季节,也是一个离别的季节,四年一千多个日日夜夜,那校园的角角落落,留下了我们沉思的身影:那上百次的成绩排名表,印证了我们深深浅浅不断进步的轨迹,但是这些进步都离不开老师的谆谆教诲. ...
- 对Java框架spring、hibernate、Struts的粗浅理解
对 Struts 的理解:1. struts 是一个按 MVC 模式设计的 Web 层框架,其实它就是一个大大的 servlet,这个Servlet 名为 ActionServlet,或是 Actio ...
- linux在telnet情况下root登录提示login incorrect
root登录时总是提示 login incorrect SSH可以登录 别的用户也可以通过telnet登录 唯独root不可以 解决方法: vi /etc/pam.d/login # auth r ...
- Python中的 @staticmethod@classmethod方法
python类中有三种方法,常见的是实例方法,另外两种是staticmethod装饰的静态方法,和classmethod装饰的类方法. 1.对比 流畅的python里,用一个例子进行了对比: (1)两 ...
- redis-hash操作
hset(name, key, value) # name对应的hash中设置一个键值对(不存在,则创建:否则,修改) # 参数: # name,redis的name # key,name对应的has ...
- node20180927
1. fs读文件.写文件 // 1 fs读文件 var fs = require('fs') fs.readFile('./20180926 demo/a.text', function (err, ...
- Android读写配置2
上篇文章采用 Properties 读写配置,各种路径错误,要么没有写入权限. 后来查资料,采用另一种方式读写 SharedPreferencesImpl 直接贴代码 公共类 -- 读写 packag ...
- Spark环境搭建(二)-----------HDFS shell 常用操作
配置好HDFS,也学习了点HDFS的简单操作,跟Linux命令相似 1) 配置Hadoop的环境变量,类似Java的配置 在 ~/.bash_profile 中加入 export HADOOP_HO ...
- [BZOJ2457][BeiJing2011]双端队列 (单调性)
正如lyd所说,和数据结构本身没什么太大关联 题意 中文题面 Sherry现在碰到了一个棘手的问题,有N个整数需要排序. Sherry手头能用的工具就是若干个双端队列. ...