Vue中插槽和配置代理如何使用

這篇“Vue中插槽和配置代理如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中插槽和配置代理如何使用”文章吧。

一，插槽

1.什么是插槽

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

1.1默認插槽

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

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

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

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

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

1.2具名插槽

簡單來說在子組件內(nèi)具名插槽比默認的插槽多了一個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">
        <h4>{{title}}</h4>
        <!-- 具名插槽 -->
        <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}">
        <h5>
          <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </h5>
      </template>
    </Category>

子組件

<template>
  <div class="category">
    <h4>{{title}}</h4>
    <slot :games="games">我是作用域插槽，在沒有傳結(jié)構(gòu)式我才會顯示該片段文字</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["紅警", "綠警", "藍警", "紫警"]
    };
  }
};
</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',// 代理目標的基礎路徑
        pathRewrite: {
            '^/shanyu': '' // 將所有的前綴替換為空串再去服務器內(nèi)擦護照該路徑
             // ws和changeOrigin默認都為true
            // ws: true, // 用于支持websocket
               // changeOrigin: true // 用于控制請求頭host的值
        },
          //changeOrigin設置為true時，服務器收到的請求頭中的host為: localhost: 5000
        //changeOrigin設置為false時，服務器收到的請求頭中的host為: localhost :8080
      }

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

以上就是關于“Vue中插槽和配置代理如何使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。