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. redis数据备份与恢复

    1.启动redis 进入redis目录 redis-cli 2.数据备份 redis 127.0.0.1:6379> SAVE 该命令将在 redis 备份目录中创建dump.rdb文件. 3. ...

  2. 金蝶K/3 审批相关SQL语句

    金蝶K/3 审批相关SQL语句 --http://127.0.0.1/lightApp/todocheckTask.aspx?AccID=84&&FClasstypeID=1071&a ...

  3. Java Spring Boot VS .NetCore (八) Java 注解 vs .NetCore Attribute

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  4. Wxpython入门

    Wxpython入门 api文档以及中文教程: https://pan.baidu.com/s/1TDTgHg9Mwc74ODQy68YnlQ 提取码:354n 入门示例 frame=wx.Frame ...

  5. CSS属性兼容写法

    一种是用js判断兼容性 // JS if ("CSS" in window && "supports" in window.CSS) { var ...

  6. PBRT笔记(2)——BVH

    BVH 构建BVH树分三步: 计算每个图元的边界信息并且存储在数组中 使用指定的方法构建树 优化树,使得树更加紧凑 //BVH边界信息,存储了图元号,包围盒以及中心点 struct BVHPrimit ...

  7. BZOJ 4644

    可以把修改当成删除再插入一个新的, 线性基不容易删除,就用线段树分治 好像手写的bitset在这里很慢 #include<bits/stdc++.h> using namespace st ...

  8. Object类的方法

    一 Object:类Object是类层次结构的跟类,每个类都使用Object作为超类,每个类都是直接或者间接的继承自Object类. Object类的方法: ①public int hashCode( ...

  9. 有关svn的报错

    由于目标计算机积极拒绝,无法连接.当报出这样的错的时候就是跨域的问题

  10. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...