parent.vue(父组件的内容):

<template>
<div @click="divClick">
<info-wnd ref="infoWnd"></info-wnd>
  </div> </template>
<script>
import infoWnd from './info-wnd';
export default {
data() {
return {
}
},
components: { infoWnd },
methods: {
divClick() {
this.$refs.infoWnd.infoWndClick(); //调用子组件的方法
}
}
}
</script>

子组件info-wnd.vue内容:

<template>
<div>
<span>这是子组件</span>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
infoWndClick() {
console.log('这是子组件的方法');
}
}
}
</script>

Vue 父组件调用子组件函数的方法的更多相关文章

  1. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  2. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  3. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  4. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  5. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  6. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  7. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  8. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  9. 父组件调用子组件 viewChild

    父组件调用子组件 1.在子组件的ts中声明一个变量 public  lineout:any="你好,我是被父组件调用的子组件";  2.在父组件的html中写入 (引入子组件) & ...

  10. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

随机推荐

  1. 【转】Ubuntu英文系统下安装中文输入法

    转自:https://my.oschina.net/No5stranger/blog/290026 ubuntu默认的输入法是ibus,综合网上评论,fcitx的支持者更多,而且个人感觉fcitx也的 ...

  2. idea:打包jar(原文by曲高终和寡)

    idea打包java可执行jar包   1,在项目上鼠标右键 --> Open Module Settings 2, Artifacts --> + --> JAR --> F ...

  3. 指导手册03:Hadoop基础操作

    指导手册03:Hadoop基础操作 Part 1:查看Hadoop集群的基本信息1.查询存储系统信息(1)在WEB浏览器的地址栏输入http://master:50070/ 请查看自己的Hadoop集 ...

  4. 1093 字符串A+B

    给定两个字符串 A 和 B,本题要求你输出 A+B,即两个字符串的并集.要求先输出 A,再输出 B,但重复的字符必须被剔除. 输入格式: 输入在两行中分别给出 A 和 B,均为长度不超过 10​6​​ ...

  5. 3、调试AngularJs

    1.获取Angular元素: angular.element(document.querySelector('html')); a.ele.scope()  提取它的$scope对象 b.ele.co ...

  6. 关于multi-index

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/22 将$D^{\alpha}$和$\partial^{\alpha}$区别对待.$D^{\alpha} ...

  7. Golang基础之函数

    golang基础之函数 1.为什么需要函数? 有些相同的代码可能出现多次,如果不进行封装,那么多次写入到程序中,会造成程序冗余,并且可读性降低 2.什么是函数 为完成某些特定功能的程序指令集合称为函数 ...

  8. 开源WHMCS支付宝当面付和即时到账插件

    开源WHMCS支付宝当面付和即时到账插件 链接: https://pan.baidu.com/s/1i5HU4hn 密码: crq7

  9. MyBatis举例以及连接数据库过程

    第一:创建实体类 package entity; public class Emp { private int empno; private String ename; private String ...

  10. 笔记本使用control线连接交换机

    要求: 1.一台笔记本 2.一条usb转rj45串口线 (一端是usb口一端是网口) 连接步骤: usb口插入笔记本,网口插入交换机控制口(交换机上面一般会有标注) 直连步骤: 首先查看是哪个com口 ...