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. LNMP下安装Pureftpd开启FTP服务以及修改FTP端口的方法

    LNMP 环境包 1.2 内置了 Pureftpd 的安装程序. 安装 Pureftpd 进入lnmp解压后的目录,执行:./pureftpd.sh 会显示如下图: 按提示输入当前MySQL的root ...

  2. 此主机支持Intel VT-x,但Intel VT-x处于禁用状态

    原因:未开启虚拟化技术 解决方法:https://www.cnblogs.com/jiefu/p/10711955.html

  3. Coverity代码扫描工具

    1.说明:Coverity代码扫描工具可以扫描java,C/C++等语言,可以和jenkins联动,不过就是要收钱,jenkins上的插件可以用,免费的,适用于小的java项目 2.这是Coverit ...

  4. MySQL学习笔记:timediff、timestampdiff、datediff

    一.时间差函数:timestampdiff 语法:timestampdiff(interval, datetime1,datetime2) 结果:返回(时间2-时间1)的时间差,结果单位由interv ...

  5. js分析 猫_眼_电_影 字体文件 @font-face

    0. 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face 这是一个叫做@font-face 的CSS @规则 ,它允许网页开发 ...

  6. python全栈开发day110-Flask基础语法

    1.Flask 初识: 短小精悍,三方支持的组件多 稳定性较差 2.三行 :启动flask服务 from flask import Flask app = Flask(__name__) app.ru ...

  7. Elasticsearch大规模时序索引如何治理和规划

    什么是时序索引? 其主要特点体现在两个方面, 一存,以时间为轴,数据只有增加,没有变更,并且必须包含timestamp(日期时间,名称随意)字段,其作用和意义要大于数据的id字段,常见的数据比如我们通 ...

  8. Django跨域、cookie、session

    前后台分离开发 1.前台页面运行在前台服务器上,负责页面的渲染(静态文件的加载)与跳转 2.后台代码运行在后台服务器上,负责数据的处理(提供数据请求的接口) 跨域 什么是跨域? 通常情况下,A网页访问 ...

  9. PBRT笔记(4)——颜色和辐射度

    SPD 光谱功率分布 CoefficientSpectrum 根据给定采样数表示光谱,为RGBSpectrum.SampledSpectrum的父类. 重载大量的基础代码,比较简单不做赘述.其中为了方 ...

  10. NEO GUI 多方签名使用

    众所周至,NEOGUI是一个开发者演示用钱包,使用体验是非常的不友好的. 今天本来打算使用多方签名账户,发现和想象的不一样,请教了小伙伴也不行.遂调试了一下原因,发现踩进坑里了.     把这个问题记 ...