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('自定义方法名')语句完 ...
随机推荐
- vue.js过滤器
import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...
- Hadoop cloudera版和Apache(原生态)的区别
---------------------------------------------------------------------------------------------------- ...
- java实现http请求
String apiUrl = "https://api.seniverse.com/v3/weather/now.json?key=" + key + "&lo ...
- Redis高可用技术解决方案总结
一.常见使用方式 Redis的几种常见使用方式包括: Redis单副本: Redis多副本(主从): Redis Sentinel(哨兵): Redis Cluster: Redis自研. 二.各种使 ...
- [转]Windows下安装storm-0.9.1
来源:https://www.cnblogs.com/liuruitao/p/4669657.html Windows下安装storm-0.9.1的详细步骤如下: 1.确定已经正确安装JDK1.6或J ...
- numpy有什么用【老鱼学numpy】
老鱼为了跟上时代潮流,也开始入门人工智能.机器学习了,瞬时觉得自己有点高大上了:). 从机器学习的实用系列出发,我们会以numpy => pandas => scikit-learn =& ...
- 怎样设置高效的IIS
适用的IIS版本:IIS 7.0, IIS 7.5, IIS 8.0 适用的Windows版本:Windows Server 2008, Windows Server 2008 R2, Windows ...
- CSS 实现左侧固定,右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
- vuejs2.0如何获取dom元素自定义属性值
1.设置定义属性值 :data-value=".." <ul class="header-ul"> <li class="flex ...
- Linux 解压命令tar
1. 参数说明: -c :建立一个打包文件: -x :解开一个打包文件: -t :查看 tar包里面的文件: (c/x/t仅能存在一个,不可同时存在,因为不可能同时压缩与解压缩.) -z :打包后用g ...