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(更正) 这样的数据,那么直接调用会报错,控制台会报错: ...
随机推荐
- ACM-ICPC 2018 南京赛区网络预赛B
题目链接:https://nanti.jisuanke.com/t/30991 Feeling hungry, a cute hamster decides to order some take-aw ...
- 剑指Offer 32. 把数组排成最小的数 (数组)
题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 题目地址 h ...
- 指向函数的指针 ------ 函数指针(function pointer)
函数指针: 指向函数的指针, 首先是一个指针, 这个指针指向一个函数. 函数具有可赋值给指针的物理内存地址,一个函数的函数名就是一个指针,它指向函数的代码.一个函数的地址是该函数的进入点,也是调用函数 ...
- 项目配置linux上, 配置文件访问不到
/** * 读入TXT文件 */public List<String> readFile(String pathName) { List<String> list = new ...
- 基于sklearn和keras的数据切分与交叉验证
在训练深度学习模型的时候,通常将数据集切分为训练集和验证集.Keras提供了两种评估模型性能的方法: 使用自动切分的验证集 使用手动切分的验证集 一.自动切分 在Keras中,可以从数据集中切分出一部 ...
- box-shadow做出一条线两种颜色
今天同事问我一个问题,说下图的效果是怎么实现的 我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把. 语法 box-shadow: ...
- 神州数码多区域OSPF配置
实验要求:掌握多区域OSPF配置 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 ip address ...
- 第七十九课 最短路径(Floyd)
程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...
- 【leetcode】414. Third Maximum Number
problem 414. Third Maximum Number solution 思路:用三个变量first, second, third来分别保存第一大.第二大和第三大的数,然后遍历数组. cl ...
- java中的映射表HashMap、TreeMap
集(set)是集合(collection),集合不是集. HashMap是散列映射.TreeMap对键进行排序了. map的三个视图:键集.值集合.键/值集. Set<K> keySet( ...