Vue.js-如何划分组件

一、组件划分

1.功能模块---select,pagenation...

2.页面区域---header, footer, sidebar...

二、引用组件

举例在App.vue中引用header.vue和footer.vue组件

1.用import引入

2.用components：[ Header, Footer ]引入 注册组件

3.引用模板

三、组件之间的通信

1.父组件向子组件传值

在app.vue中引入header.vue组件，从app.vue中向header组件传值msg，则在header.vue中用props注册一下msg属性，来接收传过来的值

     2.子组件向父组件传值用事件

         方法一：$emit（）

ex:子组件componentA向父组件App.vue传值

 1.在父组件中引入子组件

2.父组件中使用组件：在组件中绑定接受子组件传值事件listenToMyBoy将子组件的值传递到{{ childWords }}中

3.父组件中listenToMyBoy方法

4.子组件中点击事件向父组件传值

5.子组件中使用$emit()传值

四、效果