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('自定义方法名')语句完 ...
随机推荐
- redis数据备份与恢复
1.启动redis 进入redis目录 redis-cli 2.数据备份 redis 127.0.0.1:6379> SAVE 该命令将在 redis 备份目录中创建dump.rdb文件. 3. ...
- 金蝶K/3 审批相关SQL语句
金蝶K/3 审批相关SQL语句 --http://127.0.0.1/lightApp/todocheckTask.aspx?AccID=84&&FClasstypeID=1071&a ...
- Java Spring Boot VS .NetCore (八) Java 注解 vs .NetCore Attribute
Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...
- Wxpython入门
Wxpython入门 api文档以及中文教程: https://pan.baidu.com/s/1TDTgHg9Mwc74ODQy68YnlQ 提取码:354n 入门示例 frame=wx.Frame ...
- CSS属性兼容写法
一种是用js判断兼容性 // JS if ("CSS" in window && "supports" in window.CSS) { var ...
- PBRT笔记(2)——BVH
BVH 构建BVH树分三步: 计算每个图元的边界信息并且存储在数组中 使用指定的方法构建树 优化树,使得树更加紧凑 //BVH边界信息,存储了图元号,包围盒以及中心点 struct BVHPrimit ...
- BZOJ 4644
可以把修改当成删除再插入一个新的, 线性基不容易删除,就用线段树分治 好像手写的bitset在这里很慢 #include<bits/stdc++.h> using namespace st ...
- Object类的方法
一 Object:类Object是类层次结构的跟类,每个类都使用Object作为超类,每个类都是直接或者间接的继承自Object类. Object类的方法: ①public int hashCode( ...
- 有关svn的报错
由于目标计算机积极拒绝,无法连接.当报出这样的错的时候就是跨域的问题
- vue cli搭建项目
1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...