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>