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>