Vue 父组件调用子组件函数的方法
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 父组件调用子组件函数的方法的更多相关文章
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- 父组件调用子组件 viewChild
父组件调用子组件 1.在子组件的ts中声明一个变量 public lineout:any="你好,我是被父组件调用的子组件"; 2.在父组件的html中写入 (引入子组件) & ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
随机推荐
- Win10系列:C#应用控件基础13
Image控件 开发Windows应用商店应用时,除了在界面中显示文字信息以外,还可以加入图片来配合说明及增加美观度.使用Image控件能够实现显示图片的功能,开发者可以根据需求使图片按照不同的方式显 ...
- E: Sub-process /usr/bin/dpkg returned an error code (1)错误解决
在用apt-get安装软件时出现了类似于install-info: No dir file specified; try --help for more information.dpkg:处理 get ...
- Android : 跟我学Binder --- (2) AIDL分析及手动实现
目录: Android : 跟我学Binder --- (1) 什么是Binder IPC?为何要使用Binder机制? Android : 跟我学Binder --- (2) AIDL分析及手动实现 ...
- 2 第一个Django应用 第1部分(数据库与模型)
目标应用: 一个公开的网站,可以让访客查看投票的结果并让他们进行投票. 一个后台管理网站,你可以添加.修改和删除选票. 查看django版本 python -c "import django ...
- LoadLibrary和GetModuleHandle
0x01 区别 LoadLibrary是把一个模块映射进调用进程的地址空间,需要时增加引用计数,每调用一次,引用计数增加一,需要通过相同步骤地调用FreeLibrary来减少引用次数,当为0时,系统 ...
- nasm学习资料
http://cee.github.io/NASM-Tutorial/ 学习nasm的一个例子, 不错, 代码跟着敲, 出结果.理解起来不费事. http://www.mouseos.com/as ...
- tf 随机数
tf生成随机数 import tensorflow as tf sess = tf.InteractiveSession() ### 生成符合正态分布的随机值 # tf.random_normal(s ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- 扫描工具——Nmap用法详解
Nmap使用 Nmap是主机扫描工具,他的图形化界面是Zenmap,分布式框架为Dnamp. Nmap可以完成以下任务: 主机探测 端口扫描 版本检测 系统检测 支持探测脚本的编写 Nmap在实际中应 ...
- nginx——Nginx 防爬虫优化
if ($http_user_agent ~* "qihoobot|Baiduspider|Googlebot|Googlebot-Mobile|Googlebot-Image|Mediap ...