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>
  • 相关阅读:
    samdump2获取虚拟机密码
    PHP执行cmd方法若干
    Aircrack-ng学习笔记之无AP破解WiFi密码
    Python基础:extend与append的区别
    Python基础:dictionary
    UVALive 3177 长城守卫
    UVALive 3902 网络
    UVA 11520 填充正方形
    UVALive 3635 分派
    UVALive 3971 组装电脑
  • 原文地址:https://www.cnblogs.com/minozMin/p/9811249.html
Copyright © 2011-2022 走看看