亲宝软件园·资讯

展开

如何正确快速使用Vue中的插槽和配置代理

Aic山鱼 人气:0

一,插槽

1.什么是插槽

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

1.1默认插槽

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

子组件内定义一个插槽

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定义一个插槽(等待组件的使用者进行填充) -->
    <slot>我是默认插槽,在没有传结构式我才会显示该片段文字</slot>
  </div>
</template>

父组件内填充数据

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

1.2具名插槽

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

父组件使用center和footer插槽

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

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

 <template>
      <div class="category">
        <h3>{{title}}</h3>
        <!-- 具名插槽 -->
        <slot name = "center">我是具名插槽center</slot>
        <slot name = "footer">我是具名插槽footer</slot>
        <img src="" alt="">
      </div>
 </template>

1.3作用域插槽

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

父组件

    <Category title="游戏">
      <template slot-scope="{games}">
        <h4>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </h4>
      </template>
    </Category>

子组件

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <slot :games="games">我是作用域插槽,在没有传结构式我才会显示该片段文字</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["红警", "绿警", "蓝警", "紫警"]
    };
  }
};
</script>

二,配置代理

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

    devServer:{
 
        proxy: "http://localhost:5000"
 
    }

注意:

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

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

代理流程:发送请求

加载全部内容

相关教程
猜你喜欢
用户评论