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

灰太狼 2022-05-22 13:13 253阅读 0赞

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

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

![这里写图片描述][70]  
  
App.vue是项目的入口，我们分好的组件也是一个Vue文件，在APP.vue我们把各个组件导入，然后在components（是数组\[\]）中注册，在模板层面上就可以使用了`<header><footer>`来调用组件的内容 了,注意的是Vue组件 需要注册才能使用  
  
**2.组件之间的通信：**  
![这里写图片描述][70 1]  
组件之间的通信包括父向子传参和子向父传参。  
具体参照下一笔记。  
**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}
    }

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

[70]: /images/20220522/faf1f1d79303495bb17daf333dbf7dda.png
[70 1]: /images/20220522/4ebfd4ca84274e0186940791257d7b8a.png