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 子组件调用父组件的方法的更多相关文章

  1. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  2. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  4. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  5. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  8. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  9. vue.js(19)--vue中子组件调用父组件的方法

    子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...

随机推荐

  1. OpenCV3编程入门-读书笔记2-core组件

    一.颜色空间缩减 1.概念 如果图像是3通道,深度为1个字节,则每个像素有256*256*256种可能值,这么多的可能值会对算法性能造成严重影响.利用颜色空间缩减就能解决这个问题,例如将颜色值0~9取 ...

  2. 【原创】Linux基础之SSH隧道/端口转发

    格式 ssh -L <local port>:<remote host>:<remote port> <SSH servername> 示例 # ssh ...

  3. 【MySql】常用方法总结

    将一个字段分组,统计每组重复个数,并排序 SELECT Customer, OrderDate, count(*) as Num FROM `all_orders` GROUP BY Customer ...

  4. HTTP/1.1 请求方法

      HTTP(Hypertext Transfer Protocol,超文本传输协议)是一种用于分布式.协作式和超媒体信息系统的 应用层协议.HTTP 是万维网的数据通信的基础.默认端口为 80.   ...

  5. centos + nginx + php-fpm +mysql的简单配置

    安装前准备 安装约定(这个根据自己习惯,可自行修改) 1.软件源码包我都下载到/usr/local/src这个目录下 2.软件一般都编译安装到/usr/local这个目录下 安装基础库 yum -y ...

  6. js小方法,获取知道公历生日 (‘1992-01-19’),获取阴历生日日期,属相,非简单根据年份判断-----------声明:整理自网络!!

    let lunar = { tg: '甲乙丙丁戊己庚辛壬癸', dz: '子丑寅卯辰巳午未申酉戌亥', number: '一二三四五六七八九十', year: '鼠牛虎兔龙蛇马羊猴鸡狗猪', mont ...

  7. beta冲刺2/7

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(2/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 做了点商家数据表格 接下来的计划 做 ...

  8. .net core 2.x - 日志 - to elasiticsearch

    记录日志到elasticsearch(es),下面简写es,然后我们可以通过kibana可视化的观察日志信息以及统计分析等. 1.起源 年中旬时候,公司有个需求是需要分析用户的地址,需要先分词处理然后 ...

  9. 记 Win10 + Ubuntu18.04 安装

    目录 一.准备(一)环境(二)镜像(三)优盘 (四)启动项管理软件EasyBCD(五)启动优盘制作软件(六)分区二.安装 (一)优盘启动(二)安装windows10(三)安装ubuntu18.04(四 ...

  10. Java 中的内部类

    前言 在第一次把Java 编程思想中的内部类这一章撸完后,有点印象.大概知道了什么时内部类,局部内部类,匿名内部类,嵌套内部类.随着时间的推移,自己慢慢的就忘记了,总感觉自己思考的东西不多,于是 看了 ...