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. Python知识目录

    目录 一.计算机基础 二.Python基础 三.函数 四.常用模块 五.模块和包 六.面向对象 七.网络编程socket 八.数据库 九.前端 十.Python Web框架 十一.版本控制--GIT ...

  2. Postgresql查询出换行符和回车符:

    1.有时候,业务因为回车和换行出现的错误,第一步,首先要查询出回车符和换行符那一条数据: -- 使用chr()和chr()进行查询 SELECT * )||)||'%'; -- 其实查询chr()和c ...

  3. servlet(一):Servlet的概念和运行流程

    概念: 狭义的 Servlet 是指 Java 语言实现的一个接口,广义的 Servlet 是指 任何实现了这个 Servlet 接口的类,一般情况下,人们将 Servlet 理解为后者. Servl ...

  4. React十进制和二进制转换的实现和分析

    [描述] 模仿官方文档的摄氏度和华氏度的转换,实现十进制和二进制的互换. [实现] import React from 'react'; import ReactDOM from 'react-dom ...

  5. 利用kibana插件对Elasticsearch进行批量操作

    #############批量获取################# #获取所有数据 GET _mget { "docs": [ {"_index":" ...

  6. Python编码规范:IF中的多行条件

    Python编码规范:IF中的多行条件 转载 2017年03月08日 09:40:45 http://blog.csdn.net/wsc449/article/details/60866700 有时我 ...

  7. container

    容器是轻量级的操作系统级虚拟化,可以让我们在一个资源隔离的进程中运行应用及其依赖项.运行应用程序所必需的组件都将打包成一个镜像并可以复用.执行镜像时,它运行在一个隔离环境中,并且不会共享宿主机的内存. ...

  8. 一种常见的maven打包后同名文件冲突错误

    在使用一些开源框架的时候(比如spark.hadoop.lucene等),偶尔会见到说找不到某个具体实现类或者某个配置(比如spark的akka配置)不见了. 部分例子如下: [Lucene]An S ...

  9. web学习路线

  10. 20189210牟健 《Linux内核原理与分析》第二周作业

    本周学习了汇编指令以及通过反汇编一个小程序来了解栈的变化 写了一个简单的C程序,如图所示: 通过gcc -s -o main.s main.c -m32指令将其编译成汇编程序 打开该汇编文件并删除不重 ...