（四）組件複用和數據傳遞——vue-cli3實例：電商分類網頁

#組件複用意識

 

本項目的組件結構：（嵌套使用，這類似於構成了一顆組件樹）

First.vue(首頁) 【Left.vue(側邊欄) + Right.vue 【goodList.vue(商品列表)】】

格式相同，數據不同的顯示方式 和 將大布局切分成小布局 都適合使用組件

 

#組件傳值

1）兄弟間傳值

通過事件總線 來進行傳值，Msg爲事件總線對象，emit():觸發on事件，進行傳值   on():接收值

menu1:function(){
                Msg.$emit("val","1");
            }

mounted:function(){
            var _this=this
            Msg.$on('val',function(m){
                _this.kk=m;
            })
        }

mounted中this爲vue本身，on中的this爲on本身，要想在on中使用vue的this,必須爲vue的this新建一個副本

 

2）父子間傳值

 

#格式

<script>中，一定包含export default{ }

export default{ }中，每個選項以‘，’隔開

每個函數選項中，定義變量、賦值語句用‘；’隔開