Vue 子组件调用父组件方法
父组件内容:
<template>
<div>
<info-wnd ref="infoWnd" @parentClick="wndClick"></info-wnd>
</div> </template>
<script>
import infoWnd from './info-wnd';
export default {
data() {
return {
}
},
components: { infoWnd },
methods: {
wndClick() {
console.log('这是父组件的方法');
}
}
}
</script>
子组件Info-wnd.vue组件内容:
<template>
<div @click="divClick">
<span>这是子组件</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
divClick() {
this.$emit('parentClick'); //调用父组件的方法
}
}
}
</script>
Vue 子组件调用父组件方法的更多相关文章
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- 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中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue.js(19)--vue中子组件调用父组件的方法
子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...
随机推荐
- C# 树状图
效果图: 结构: frmMain层 using hierarchy.BLL; using hierarchy.Model; using System; using System.Collections ...
- Homestead的安装配置
laravel学院教程 : http://laravelacademy.org/post/7658.html 参考博文:https://blog.csdn.net/xyxjn/article/deta ...
- STL——string
C++之string类型详解 之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够.字符串长度等等,而且作为一个泛型类出现,他集成的操作函 ...
- mysql 两张表的数据设置主外健关联删除
image_group 主表 image 副表 alter table image add constraint fk_group_idforeign key (group_id)references ...
- 如何处理Excel空行问题
在操作excel的时候, 可能会出现很多的无效数据行. 下面是一个我的简单处理方式 public static bool DataSetToExcel(DataSet dataSet, string ...
- cdcq的独立博客
cdcq的独立博客终于又复活啦,以后就用这个了 地址: http://cdcq.coding.me 现在用的是luogu的博客:https://cdcq.blog.luogu.org/
- Linux----------mysql基础
目录 一.数据库介绍 1.1 数据库的优点 1.2 数据库的基本功能 1.3数据库的类型 1.4 关系型数据的组成 1.5 关系型数据库的常用组件 1.6 SQL语句 1.7 mysql命令使用 1. ...
- DevExpress GridControl控件行内新增、编辑、删除添加选择框
以下为内容以图片居多1234表示点击顺序 先新增一行 操作和新增数据行一样 打开ColumnEdit 选择new ButtenEdit new上方会出现一个系统命名的button 命名可以更改必须 ...
- 手写SpringMVC实现
设计自己的MVC架构 1.读取配置通过web.xml中加载我们自己写的MyDispatcherServlet和读取配置文件. 2.初始化九大组件只需实现基本的:1).加载配置文件:2).扫描用户配置包 ...
- DevExpress中GridControl的重新绑定数据后如何刷新 (转)
如果对girdcontrol的datasource新添加数据,重新刷新, gridControl1.DataSource = list; gridView1.RefreshData();