vue组件

一、如何划分组件

　　1.1功能模块：select,pagenation......

　　1.2页面区域：header,footer,nav,sidebar......

二、组件之间的调用

　　2.1 文件布局

　　　　App.vue ------- 项目入口

　　　　header.vue----- 组件

　　　　footer.vue ------ 组件

　　2.2 在App.vue中导入组件，组件必须注册了才能用　

//引入的组件在模板直接使用
<header></header>
<footer></footer>　

//引入组件
import Header from './header'
import Footer from './footer'
new Vue({
   data:{
        isShow:true
    },
    //注册组件
    components:{
        Header,Footer
    }
})

　　2.3 组件之间的通信-props　

　　　　父组件向子组件传值：

　　　　在子组件要用props注册接收父组件传值的属性，如'msg'；

　　　　在父组件的view层通过注册的属性接收父组件传递过来值；

//header.vue
new Vue({
   data:{
       title:'父子组件通信' 
    },
    //在子组件注册'msg'属性
   props:['msg'],
   methods:{
       show:function(){
            console.log(this.msg)
       } 
   }  
})

//App.vue
<header msg = 'hello vue.js'></header>
<footer></footer>