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