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. .NET垃圾回收机制(一)

    垃圾收集器(GarbageCollection)是组成.Net平台一个很重要的部分,.NET垃圾回收机制降低了编程复杂度,使程序员不必分散精力去处理析构.不妨碍设计师进行系统抽象.减少了由于内存运用不 ...

  2. 【剑指offer】【python】面试题2~5

    使用python实现<剑指offer>面试题ヾ(◍°∇°◍)ノ゙,以此记录. 2_实现Singleton模式 题目:实现单例模式 单例模式,是一种常用的软件设计模式.在它的核心结构中只包含 ...

  3. cocos2dx-lua 文件操作

    print("开始") --检查文件是否存在 local path = "ABC.txt" local fileExist = cc.FileUtils:get ...

  4. python下的异常处理

    一.什么是异常 程序运行过程中错误发生的信号.(如果运行时产生的异常,程序不处理就会被抛出,随之会造成程序终止) 二.异常的种类 首先,异常主要分为语法错误.逻辑错误两种类型 语法错误会在程序还没有执 ...

  5. unity setactive的使用

    1.可以用本身移出布局来实现隐藏 2.RawImage的texture的设置生成的一定要及时消除,避免内存泄漏

  6. Java的家庭记账本程序(I)

    日期:2019.2.26 博客期:037 星期二 Part 1: 今天使用新的"radio"标签,将搜索方式的选则内容更改了,如下图,不过,研究了很久的数据库连接也还是没有成功!嗯 ...

  7. 如何解决 kubernetes 重启后,启来不来的问题

    参考了 https://blog.csdn.net/nklinsirui/article/details/80855415 最近在调研 kubeneter ,准备把线上的服务器架构再调整下,然后模拟各 ...

  8. Phabricator服务的搭建

    目录 概述 遇到的坑-Phabricator连接不上MySQL 准备环境 安装软件 安装Nginx 安装MySQL 安装PHP 下载Phabricator 配置 配置nginx和php 配置phabr ...

  9. 树莓派开启samba服务

    安装samba 和 samba-common-bin 启动树莓派以后,在命令行输入: sudo apt-get update sudo apt-get install samba samba-comm ...

  10. Jmeter学习系列----3 配置元件之计数器

    在做测试时,会遇到一种需求:在大量数据的情况下,数据不能重复或者需要自增,基于这种形式,我们可以考虑使用计数器. 计数器(counter): 计数器配置允许用户配置起始点,最大值和增量. 计数器将从开 ...