（四）组件复用和数据传递——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{ }中，每个选项以‘，’隔开

每个函数选项中，定义变量、赋值语句用‘；’隔开