Vue_划分组件以及组件之间的通信

在Vue中，每个组件都是一个实例，组件可以看成是一个页面的区域。
1.组件划分：
作为一个功能模块系统，划分出一个个的组件，有两种划分模式：功能模块和页面区域：

//如何划分组件
功能模块：select,pagenation...
页面模块：header,footer,sidebar...

App.vue是项目的入口，我们分好的组件也是一个Vue文件，在APP.vue我们把各个组件导入，然后在components（是数组[]）中注册，在模板层面上就可以使用了<header><footer>来调用组件的内容 了,注意的是Vue组件 需要注册才能使用

2.组件之间的通信：

组件之间的通信包括父向子传参和子向父传参。
具体参照下一笔记。
3.在当前页面引入组件
eg：
我们在components写一个Vue组件，命名为ComponentsA.vue，想将它引用到App.vue中，ComponentsA.vue如下：

<template>
    <div class="componentsA">
     <h1>{{ msgfromfather }}</h1>
  <button v-on:click='onClickme'>Click!</button>
    </div>
</template>
<script>
export default{
  data(){
     return{
     }
  },
  props:['msgfromfather'],
  methods:{
    onClickme:function(){
       this.$emit('child-tell-me-something',this.msg)
    }
  }
}
</script>
<style scoped>
</style>

如果写组件要在当前页面App.vue使用的话，首先要引入import进来该组件，然后在export default注册一下：

 import componentsA from './components/componentsA'
  export default {
   components:{componentsA}
}

然后在用标签<组件名>，就可以在页面中中显示子组件的内容了。

<componentsA></componentsA>