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

更新時間：2023年01月31日 10:46:49 作者：Aic山魚

這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識,插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下

一，插槽

1.什么是插槽

讓父組件可以向子組件指定位置插入html結(jié)構(gòu),也是一種組件間通信的方式,適用于父組件——>子組件。插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽

1.1默認(rèn)插槽

啥是默認(rèn)插槽呢？其實默認(rèn)插槽相當(dāng)于你買了一新房子，然后各個房間都已經(jīng)裝飾好了，但是你還有一間屋子還沒裝修，因為你暫時不知道里面要裝一套電競設(shè)備還是弄一書柜，所以先在那屋留好地方，這時候你來到了商場，看到一心儀的書柜，然后就跟銷售人員說，這個我買了，之后就把這個書柜放到了那個空出來的屋子里，插槽也是如此，子組件好比空屋子，父組件好比心儀書柜（記住<子組件內(nèi)定義插槽，父組件內(nèi)寫好數(shù)據(jù)>即可）

子組件內(nèi)定義一個插槽

<template>
  <div class="category">
    <h3>{{title}}</h3>
    <!-- 定義一個插槽（等待組件的使用者進(jìn)行填充） -->
    <slot>我是默認(rèn)插槽，在沒有傳結(jié)構(gòu)式我才會顯示該片段文字</slot>
  </div>
</template>

父組件內(nèi)填充數(shù)據(jù)

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

1.2具名插槽

簡單來說在子組件內(nèi)具名插槽比默認(rèn)的插槽多了一個name屬性，在父組件內(nèi)多了這樣一行代碼 slot = "具名插槽名"，具名插槽能更好的控制所要放置數(shù)據(jù)的位置

父組件使用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:;">植物大戰(zhàn)講師</a>
            <a href="javascript:;">冰火人闖森林</a>
          </div>
      </Category>

子組件內(nèi)定義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作用域插槽

理解:數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。(games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由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">我是作用域插槽，在沒有傳結(jié)構(gòu)式我才會顯示該片段文字</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["紅警", "綠警", "藍(lán)警", "紫警"]
    };
  }
};
</script>

二，配置代理

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

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

注意:

優(yōu)點:配置簡單直接發(fā)請求給8080端口即可

缺點:不能配置多個代理且不靈活（若自己有資源，但是需要請求非前端資源，只能走自己已有的資源）

代理流程：發(fā)送請求??開啟代理??如果前端有資源那么拿來就用，如果沒有去請求資源

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

  devServer: {
    proxy: {
      '/shanyu': {// 匹配所有以'shanyu'開頭的請求路徑
        target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
        pathRewrite: {
            '^/shanyu': '' // 將所有的前綴替換為空串再去服務(wù)器內(nèi)擦護(hù)照該路徑
             // ws和changeOrigin默認(rèn)都為true
            // ws: true, // 用于支持websocket
               // changeOrigin: true // 用于控制請求頭host的值
        },
          //changeOrigin設(shè)置為true時，服務(wù)器收到的請求頭中的host為: localhost: 5000
        //changeOrigin設(shè)置為false時，服務(wù)器收到的請求頭中的host為: localhost :8080
      }

changeOrigin一般都設(shè)置為false，因為服務(wù)器無論是否設(shè)置了某些不能請求其他端口的請求時，changeOrigin它也可以將自己變成所請求資源的服務(wù)器的相同用端口（簡單來說就是，changeOrigin設(shè)置為false時，向哪臺服務(wù)器發(fā)起請求，呈現(xiàn)的就是那臺服務(wù)器的端口號）

到此這篇關(guān)于正確快速使用Vue中的插槽和配置代理的文章就介紹到這了,更多相關(guān)Vue中的插槽和配置代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: