Vue 组件的使用

1、引入组件

import Week from '../week/main.vue'

export default {
    name: "classMain",
    components: {
        Week: Week
    },
    data(){
        return {
            schoolID: this.$route.params.id,//学校 id
            portType: "incalss",//incalss,beike,iphone
            isShowChildPages: false
        }
    },
    methods: {
        showChildPage: function () {
            this.isShowChildPages = true;
        },
        closeChildPage: function (data) {
            console.log(data);
            this.isShowChildPages = false;
        },
    }
} 

 

2、显示组件

<transition name="fade1">
　　<Week v-if="isShowChildPages" :portType="portType" @closeChildPage="closeChildPage"></Week>
</transition>

 

3、组件接受参数，并调用父级方法

export default {
    name: 'weekMain',
    watch: {
        //如果路由发生了变化，更新页面数据
        $route(to, from) {
            if (to.path !== from.path) {
                this.schoolID = this.$route.params.id;
            }
        }
    },
    props: {
        portType: {
            type: String,
            default: () => {
                return ''
            }
        }
    },
    data () {
        return {
            schoolID: this.$route.params.id,//学校 id
        }
    },
    methods: {
　　　　 //重点
        closeChildPage: function () {
            this.$emit('closeChildPage', false);
        }
    }
}