Vue.js-如何划分组件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_24767091/article/details/82593047

一、组件划分

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

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

二、引用组件

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

1.用import引入

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

3.引用模板

三、组件之间的通信

扫描二维码关注公众号,回复: 4944797 查看本文章

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()传值

四、效果

猜你喜欢

转载自blog.csdn.net/qq_24767091/article/details/82593047