Vue2进阶——插槽/ajax问题

P96-P101没听

一、插槽

• 作用：通过插槽，让父组件向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件->子组件

1、默认插槽

1.父组件
<Demo>
定制的内容
</Demo>
2.子组件Demo.vue
//定制的内容应该存放的位置。若无定制的内容则显示默认值
<slot>默认值<slot>

2、具名插槽

当有多个定制内容，需要多个插槽，因此需要给插槽命名

1.父组件
<Demo>
<div slot="name1"></div>
<div slot="name2"></div>
<templete v-slot:name3></templete>   //templete独特的写法
</Demo>
2.子组件Demo.vue
//定制的内容应该存放的位置。若无定制的内容则显示默认值
<slot name="name1">默认值<slot>
<slot name="name2">默认值<slot>

3、作用域插槽

• 理解：数据在组件自身，但根据数据生成的结构需要组件的使用者来决定，

1.父组件中
	<Category>
		<templete scope="scopeData">   //使用作用域插槽一定要用templete
			<ul>
				<li v-for="g in scopeData.games" :key="g">{{g}}</li>
			</ul>
		</templete>
	</Category>
	//scope和slot-scope都可以
	<Category>
		<templete slot-scope="scopeData">   //使用作用域插槽一定要用templete
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
		</templete>
	</Category>
2.子组件中
<templete> 
	<div>
		<slot :games="games"></slot>	
	</div>
</templete>
<script>
	export default{
		//数据在子组件本身
		data(){
			return{
				games:["1","2","3"]
			}
		}
	}
	
</script>

二、ajax请求跨域问题

1、常见方式

发送ajax请求目前有以下几种方式：

• xhr：JS内置发送请求的对象(windows上)，最原始的方式，因为比较麻烦不常用
• jQuery：
  通过操作DOM对象发送请求，与Vue初衷（减少DOM操作相悖）（差不多有80%代码在操作DOM）。
  体积大。
  是对xhr的封装
• axios：
  是对xhr的封装。用的最多
• fetch
  与xhr同级，是JS上内置的（windows上），是Promise风格。
  兼容性问题较大，IE浏览器不能用

因此推荐使用axios在vue框架中发送ajax请求

2、axios发送请求

function(){
	axios.get('http://localhost:5000/students').then(
		response=>{   //请求成功
		},
		error=>{   //请求失败
		}
	)
}

3、解决跨域

1）介绍

常见解决跨域的方法

• cors：配置允许跨域的响应头
• jsonp：通过script中src属性获取数据不受跨域的影响
• 代理服务器
  找到一个与前端相同url的服务器，此时两者没有跨域问题，两个服务器之间也没有跨域问题，此时就解决问题了。
  
  开启代理服务器的方法：
  • nginx（后端技术）
  • vue-cli（本节用到）

2）vue-cli开启代理服务器方式1

在vue.config.js中开启

 module.exports = {
	devServer:{
		proxy:'http://localhost:5000’  //此处写后端服务器地址
	}
}

后续发送axios请求时地址就可以写代理服务器（就是自己所在url）

function(){
	axios.get('http://localhost:8080/students').then(
		response=>{   //请求成功
		},
		error=>{   //请求失败
		}
	)
}

存在的问题

• 注意如果本地（代理）服务器有相同名地址，此时就不会向后端发送请求拿数据，直接从本地地址拿，此时就会出现问题
• 只能选择一个后端服务器配置代理，不能选择多个

3）vue-cli开启代理服务器方式2

解决方式一存在的两个问题。

在vue.config.js中开启

 module.exports = {
	devServer:{
		proxy:{
			//'api'表示请求前缀，如果想走代理则在原始url前加上请求前缀
			//eg.下面例子以后想请求就需要写'http://localhost:8080/api/server',
			//但是注意这样的传给后端的就是/api/server，此时后端路径会多一个api，后端就拿不到数据
			//因此需要写pathRewrite将其去掉
			‘/api’:{     
				target:'http://localhost:5000/server',
				pathRewrite:{'^/api':''}
				ws:true,   //用于支持websocket
				//设置为true则告诉后端自己也是5000服务器（假装骗人），否则说实话（代理服务器） 
				//有时后端限制代理服务器使用，此时就需要骗后端
				changeOrigin:true   
			},
			‘/foo’:{
				target:'<other_url>',
				ws:true,
				changeOrigin:true
			}
		}
	}
}