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项目