zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HTML 相关面试题
    h5简写时钟效果
    软件工程结对作业二
    软件工程结对作业一
    软件工程第三次作业
    软件工程第二次作业
    软件工程第一次作业
    软件工程第四次作业
    软件工程第三次作业
    2019软件工程第二次作业(VS2017中对C++的单元测试)
  • 原文地址:https://www.cnblogs.com/minozMin/p/9811249.html
Copyright © 2011-2022 走看看