vue 子组件调用父组件的方法
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 子组件调用父组件的方法的更多相关文章
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue.js(19)--vue中子组件调用父组件的方法
子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...
随机推荐
- 在js中插入html语句
连上数据库之后,填充数据时往往需要在js中插入html语句 做法是: <body> <div class="modal-body" id="delete ...
- 二阶环路滤波器的matlab 设计
clc; Rs=10*10^6; %码速率 es=0.707; %阻尼系数 fs=8*10^6; %采样频率.系统时钟频率 Bit_Loop_out=27;%环路滤波器输入输出位宽 N=31; %NC ...
- 集腋成裘-08-ECharts -简介-01
目标:让数据说话. 大数据时代的到来以及有效应用,大幅度提升了企业的管理能力.决策科学化与可执行性水平,推动传统决策方式朝着数据驱动转型.可视化数据分析对决策者产生的意义将在事前预测.事中感知以及事后 ...
- linux环境部署python3+django
1. 确定Linux安装C/C++编译器,在线安装: yum install gcc gcc-c++ autoconf automake 2. 安装依赖环境: yum -y install zlib- ...
- python 2.7 数据结构: 基础面试总结
python中基础的数据类型包括: 1 Number(数字) 2 String(字符串) 3 List(列表) 4 Tuple(元组) 5 set(集合) 6 Pictionary(字典) 按照可变数 ...
- Android人脸检测1(静态图片)
搭建Android人脸识别环境花了很长时间(可以查看之前的文章),解决Android开发中的杂七杂八小问题也耗时不少. 今天记录一下,点击选择照片或者拍照上传照片进行人脸检测的小demo. (andr ...
- 原生HttpClient详细使用示例
一.HttpClient类 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; ...
- 如何在Python脚本中调用外部命令(就像在linux shell或Windows命令提示符下输入一样)
如何在Python脚本中调用外部命令(就像在linux shell或Windows命令提示符下输入一样) python标准库中的subprocess可以解决这个问题. from subprocess ...
- mysql性能监控软件pmm
具体配置操作步骤:1.在vmware或者virtualbox上安装centos镜像,可以选择阿里巴巴的镜像,下载速度快 centos7 修改yum源为阿里源,某下网络下速度比较快 首先是到yum源设置 ...
- Linux安装RocketMQ
本文介绍Linux安装RocketMQ. 1.RocketMQ简介 RocketMQ是阿里巴巴中间件开发的分布式消息系统,曾经经历过很多阿里巴巴大型项目的实际检验.在去年已经正式捐献给Apache开源 ...