vue组件化编程

vue文件包含3个部分

  <template>

      <div></div>

  </template>

  <script>

    export default {

   　　　　props: []/{}

          data(){},

     　　　computed: {}

          methods: {},

   　　　　watch: {}

     　　　filters: {}

          directives: {}

          components: {}

     }

 </script>

 <style>

 </style>

组件化编码的基本流程

1). 拆分界面, 抽取组件

2). 编写静态组件

3). 编写动态组件

初始化数据, 动态显示初始化界面

实现与用户交互功能

组件通信的5种方式

props

vue的自定义事件

pubsub第三方库

slot

vuex(查看vuex核心概念)

props:

父子组件间通信的基本方式

属性值的2大类型:

一般: 父组件-->子组件

函数: 子组件-->父组件

隔层组件间传递: 必须逐层传递(麻烦)

兄弟组件间: 必须借助父组件(麻烦)

vue自定义事件

子组件与父组件的通信方式

用来取代function props

不适合隔层组件和兄弟组件间的通信

pubsub第三方库(消息订阅与发布)

适合于任何关系的组件间通信

slot

通信是带数据的标签

注意: 标签是在父组件中解析

vuex

多组件共享状态(数据的管理)

组件间的关系也没有限制

功能比pubsub强大, 更适用于vue项目