【学Vue就跟玩一样】如何正确快速使用Vue中的插槽和配置代理

一，插槽

1.什么是插槽

让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件——>子组件。插槽分为三种，分别是默认插槽、具名插槽、作用域插槽，下面分别列出了如何使用这三种插槽

1.1默认插槽

啥是默认插槽呢？其实默认插槽相当于你买了一新房子，然后各个房间都已经装饰好了，但是你还有一间屋子还没装修，因为你暂时不知道里面要装一套电竞设备还是弄一书柜，所以先在那屋留好地方，这时候你来到了商场，看到一心仪的书柜，然后就跟销售人员说，这个我买了，之后就把这个书柜放到了那个空出来的屋子里，插槽也是如此，子组件好比空屋子，父组件好比心仪书柜（记住<子组件内定义插槽，父组件内写好数据>即可）

子组件内定义一个插槽

1. <template>
2. <div class="category">
3. <h3>{{title}}h3>
5. <slot>我是默认插槽，在没有传结构式我才会显示该片段文字slot>
6. div>
7. template>

父组件内填充数据

1. <Category title="美食">
2. <img slot src="./assets/logo.png" alt>
3. Category>

1.2具名插槽

简单来说在子组件内具名插槽比默认的插槽多了一个name属性，在父组件内多了这样一行代码 slot = "具名插槽名"，具名插槽能更好的控制所要放置数据的位置

父组件使用center和footer插槽

1. <Category title="游戏">
2.     <ul slot="center">// 使用center具名插槽
3.     <li v-for="(g,index) in games" :key="index">{{g}}li>
4.     ul>
5.     <div class="foot" slot="footer">// 使用footer具名插槽
6.     <a href="javascript:;">植物大战讲师a>
7.     <a href="javascript:;">冰火人闯森林a>
8.     div>
9. Category>

子组件内定义conter和footer具名插槽

1. <template>
2.     <div class="category">
3.     <h3>{{title}}h3>
4.    
5.     <slot name = "center">我是具名插槽centerslot>
6.     <slot name = "footer">我是具名插槽footerslot>
7.     <img src="" alt="">
8.     div>
9. template>

1.3作用域插槽

理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中， 但使用数据所遍历出来的结构由App组件决定)

父组件

1. <Category title="游戏">
2. <template slot-scope="{games}">
3. <h4>
4. <li v-for="(g,index) in games" :key="index">{{g}}li>
5. h4>
6. template>
7. Category>

子组件

1. <template>
2. <div class="category">
3. <h3>{{title}}h3>
4. <slot :games="games">我是作用域插槽，在没有传结构式我才会显示该片段文字slot>
5. div>
6. template>
7. <script>
8. export default {
9. name: "Category",
10. props: ["title"],
11. data() {
12. return {
13. games: ["红警", "绿警", "蓝警", "紫警"]
14. };
15. }
16. };
17. script>

二，配置代理

方式1：在vue.config.js中添加如下配置

1.     devServer:{
3.         proxy: "http://localhost:5000"
5.     }

注意:

优点:配置简单直接发请求给8080端口即可

缺点:不能配置多个代理且不灵活（若自己有资源，但是需要请求非前端资源，只能走自己已有的资源）

代理流程：发送请求