组件的data和methods

1.组件中的data必须是一个函数

2.data方法必须返回一个对象

使用方法和vue实例的data、methods使用方法一样

Vue.component('mycom1',{
        template : '<h1>{{message}}</h1>',
        data:function(){
            return {
                message:'这是组件中的data数据'
            }
        },
        methods:{
        }
});

 

组件切换和动画

<!--component是一个占位符， :is属性用来指定要显示组件的名称-->
//mode属性设置组件切换的模式，out-in先离场完毕再进场

       <transition mode='out-in'>
            <component :is="comName"></component>
        </transition>

----------------------------------------------------------

<style>
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(50px);
    }


    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
</style>