Vue 父组件方法和参数传给子组件的方法
<template>
<div class="content-item">
<!-- openWnd是父组件自身的方法,openDutyWnd是子组件接收的方法,info是父组件的列表数据,dutyInfo是子组件接收的列表数据-->
<info-wnd ref="emap" :openDutyWnd="openWnd" :dutyInfo="info"></emap>
</div>
</template>
<script>
import infoWnd from './info-wnd';
export default {
data() {
return {
info:{
list: [{
text: 'text1',
code: '1'
},{
text: 'text2',
code: '2'
},{
text: 'text3',
code: '3'
}],
name: 'aaa'
}
}
},
components: { infoWnd },
methods: {
openWnd(){
console.log('this is function of parent!!');
}
}
}
</script>
以上是父组件的内容,子组件的引用如下:
<template>
<div class="main">
<span @click="spanClick">{{dutyInfo.name }}</span>
<div v-if="dutyInfo.list && dutyInfo.list.length" v-for="(item, index) in dutyInfo.list" :key="index">
<span>{{item.text}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'infoWnd',
props: {
dutyInfo: {
type: Object,
default: () => {
return {
name: '',
list: []
}
}
},
openDutyWnd: {
type: Function,
default: ()=>{
console.log('prop function');
}
}
},
methods: {
spanClick() {
this.openDutyWnd(); //调用父组件的方法
}
}
</script>
Vue 父组件方法和参数传给子组件的方法的更多相关文章
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- vue父组件引用多个相同的子组件传值
没有什么问题是for 解决不了的,我一直深信这句话,当然这句话也是我说的 父组件引用多个相同的子组件传值问题 (这种情况很少遇到) 1 <template> 2 <div> 3 ...
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
- vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值
首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...
- Vue 父组件ajax异步更新数据,子组件props获取不到
转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...
- js方法中参数传过来的值包含括号
前提,传递的id为变量值,比如从后台获取数据循环,在每个循环里调用shenpi()方法,假设传的id包含括号,例如 20190329100833(更正) 这样的数据,那么直接调用会报错,控制台会报错: ...
随机推荐
- MapServer Tutorial——MapServer7.2.1教程学习——教程背景
MapServer Tutorial——MapServer7.2.1教程学习——教程背景 一.前言 目前处于MapServer学习入门阶段,所以每一步都需要打下扎实基础.尽自己最大的努力,去学习知识的 ...
- 关于Java的特点之继承
继承--解决之道 继承可以解决代码复用,让我们的编程更加靠近人类思维.当多个类存在相同的属性(变量)和方法时,可以从这些类中抽象出父类(比如刚才的Student),在父类中定义这些相同的属性和方法,所 ...
- Costura.Fody合并DLL和EXE
1.打开Nuget包管理器 2. 输入 Install-Package Costura.Fody -Version 3.3.0 3.之后Costura.Fody会嵌入到工程中,如果没有手动添加一下 4 ...
- 关于idea的debug
idea的debug真的是超级好用哎.分享几个今天学会的新方式: 1.右键会发现此选项 ,点击出现 在输入框中输入,可以通过某些公式单独计算. 2.点击属性值,右键点击set values 会出现一个 ...
- C# 图片处理方法 整理汇总
/// <summary> /// 图片转为base64编码字符 /// </summary> /// <param name="path">图 ...
- 如何用Python写一个每分每时每天的定时程序
1.计算生日是星期几 当你女朋友要过生日了,你肯定要定找家饭店订个餐庆祝一下,餐馆工作日会空一些,周末位置不好定,要是能知道她的生日是星期几就好了,下面这个程序就能搞定~~ 比如girl friend ...
- C#中关于对out和ref的认识
1.两者都是按照地址进行传递的.2.ref关键字是的参数按照引用传递的方式进行.他的效果是控制权传递会调用方法是,可以对这个参数进行修改 要使用ref参数,那么方法的定义和调用方法都必须进行显示的 ...
- Python全栈之路----函数进阶----装饰器
Python之路,Day4 - Python基础4 (new版) 装饰器 user_status = False #用户登录后改为True def login(func): #传入想调用的函数名 de ...
- SQLI DUMB SERIES-7
(1)查看PHP源代码 可以看见输入的id被一对单引号和两对圆括号包围 (2)根据提示:Dump into Outfile可知,此次攻击需要导出文件 (3)在第一关获取 @@datadir 读取数据库 ...
- The Tower of Babylon(UVa 437)
题意:有n种立方体,每种都有无穷多个.选一些正方体摞成一根尽量高的柱子(可以选择任意一条边做高),使得每个立方体的底面长宽分别严格小于它下方的立方柱的底面长宽. 题解:可以套用DAG最长路算法,可以使 ...