<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>