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. 在Tomcat中部署Web项目的操作方法,maven项目在Tomcat里登录首页报404

     maven项目在Tomcat里登录首页报404, 解决:编辑conf/server.xml进行配置<Host>里的<Context>标签里的path. <Context ...

  2. 福大软工 · 第十一次作业 - Alpha 事后诸葛亮(团队)

    福大软工·第十一次作业-Alpha事后诸葛亮 组长博客链接 本次作业博客链接 项目Postmortem 模板 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描 ...

  3. ubuntu 安装 nvm 管理Node.js 以及vim 插件增强

    安装curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bashsource ~/.bashr ...

  4. Ubuntu16.04 用Nomachine进行远程控制的配置

    本文介绍如何在Ubuntu16.04环境下运用Nomachine进行远程控制. 一. NoMachine介绍 NoMachine是一款基于NX技术进行远程控制的软件,最大的优势是跨平台,简单,可以实现 ...

  5. 软间隔分类——SVM

    引入:1. 数据线性不可分:2. 映射到高维依然不是线性可分3. 出现噪声.如图: 对原始问题变形得到#2: 进行拉格朗日转换: 其中α和r是拉格朗日因子,均有不小于0的约束.按照之前的对偶问题的推导 ...

  6. s21day12 python笔记

    s21day12 python笔记 一.函数中高级 1.1 函数可以做返回值 #示例: def func(): print(123) def bar(): return func v = bar() ...

  7. 关于windows下的文件结束符

    在<c++ primer>中有说,在windows中文件结束符为:ctrl+z,在Linux中为:ctrl+D. 但是在while(cin>>s)的语句运行中,需要两次的^Z, ...

  8. C#编码、解码与ASP.NET编码解码对应函数

    JavaScript函数分别为:encodeURIComponent/decodeURIComponent C#对应的函数分别为:Uri.EscapeUriString/Uri.EscapeDataS ...

  9. 监控端口是否开放,端口未开放关闭虚拟ip,端口开放启动虚拟IP

    #!/bin/bash#该脚本监控本机的一个端口,当端口异常时,停止lvs的本地ip直到恢复.该脚本依托于lvs.sh启动脚本#目前只支持监控1个vip #定义常用变量#配置检查的ip以及端口chec ...

  10. prettier-eslint 与 prettier-eslint-cli 区别

    prettier-eslint 与 prettier-eslint-cli 区别: prettier-eslint 只能处理字符串 prettier-eslint-cli 能处理一个或多个文件 默认情 ...