一、抽取公共组件TopHeader.vue

1.从Msite.vue抽取头部标题到src/components/TopHeader/TopHeader.vue

知识点1. 子组件接收父组件传值

1. 模板内留下接收位置：

{{title}}

2. script设置接收值的类型，注意首字母大写

//2.接收父组件传的值为title,类型为String
    props:{
      title:String
    }

知识点2.留下插槽位置

TopHeader.vue完整代码

二.使用公共组件：父传子值，使用插槽

1.msite.vue使用插槽，向子传值

1）引入子组件，并挂载

2）使用子组件，并传值，使用插槽

1.把原header删除，改为如下，重点：0-2

		
        
        
	        
	            
	        
	     
	        
            	登录|注册
          	
        

2.search.vue使用topHeader

注意：style内header相关样式别忘记删除

3.order.vue/profile.vue同2，只title变动略过

效果不变