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('自定义方法名')语句完 ...
随机推荐
- 【原创】大叔问题定位分享(25)ambari metrics collector内置standalone hbase启动失败
ambari metrics collector内置hbase目录位于 /usr/lib/ams-hbase 配置位于 /etc/ams-hbase/conf 通过ruby启动 /usr/lib/am ...
- flume taidir to kafkasink
flume的数据源采用taiDir,sink类型选择kafka类型 测试目标:flume监控某一个目录的日志文件,并将文件存储到kafka中,在kafka的消费端可以实现数据的消费 dip005.di ...
- @Autowired mapper 层次 bean 带红线
在利用@Autowired 注解创建bean 时候 有时间会带有下滑红色横线 给人一种报错的感觉 下面是去除红线的办法 将颜色红色error 等级降低为黄色warn 即可
- html基础技巧:点击、placeholder、文本、字体、清楚浮动
点击处理: 消除a标签点击后的边框,颜色(background:#fff) 1:a:focus{outline:none;} button去除边框 1:border:none 2:border:0px ...
- LMerge-github
ILMerge ILMerge是一个将多个.NET程序集合并到一个程序集中的实用程序.它可以免费使用,并以NuGet包的形式提供. 如果您在使用它时遇到任何问题,请与我们联系.(mbarnett at ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- 咸鱼入门到放弃2--Servlet
Tomcat作为一款常用的servlet容器,其模型中包含了context容器对servlet行进管理. Servlet程序是由WEB服务器调用,web服务器收到客户端的Servlet访问请求后: ① ...
- net core 获取配置文件
IConfiguration服务是net core 默认依懒注入的一个对象 直接注入(推荐使用) 新建控制器 然后构造函数直接注入 [Route("api/[controller]" ...
- 使用httpclient访问NLP应用接口例子
参考网址: http://yuzhinlp.com/docs.html 接入前须知 接入条件 1.进入网站首页,点击注册成为语知科技用户 2.注册完成后,系统将提供语知科技用户唯一标识APIKey,并 ...
- 自学华为IoT物联网_08 IoT连接管理平台介绍
点击返回自学华为IoT物流网 自学华为IoT物联网_08 IoT连接管理平台介绍 一.IoT连接管理平台的由来 1.1 物联网产业发展面临的挑战 新业务上线周期长,应用碎片化,开发周期长,场频上市慢 ...