淺析Vue中插槽和配置代理的使用方法

如何正確快速使用Vue中的插槽和設定代理程式？以下這篇文章跟大家介紹Vue中插槽和配置代理程式的使用方法，希望對大家有幫助！

一，插槽

1.什麼是插槽

讓父元件可以向子元件指定位置插入html結構,也是一種元件間通訊的方式,適用於父元件－>子元件。插槽分為三種，分別是預設插槽、具名插槽、作用域插槽，以下分別列出如何使用這三種插槽

1.1預設插槽

啥是預設插槽呢？其實預設插槽相當於你買了一新房子，然後各個房間都已經裝飾好了，但是你還有一間屋子還沒裝修，因為你暫時不知道裡面要裝一套電競設備還是弄一書櫃，所以先在那屋留好地方，這時候你來到了商場，看到一心儀的書櫃，然後就跟銷售人員說，這個我買了，之後就把這個書櫃放到了那個空出來的屋子裡，插槽也是如此，子元件好比空屋子，父元件好比心儀書櫃（記住子元件內定義插槽，父元件內寫好資料##>即可）【相關推薦：vuejs影片教學、web前端開發】

子元件內定義一個插槽

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

父元件內填資料

 <Category title="美食">
      <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  slot  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 id="title">{{title}}</h3>
        <!-- 具名插槽 -->
        <slot name = "center">我是具名插槽center</slot>
        <slot name = "footer">我是具名插槽footer</slot>
        <img src="/static/imghwm/default1.png"  data-src="" alt="  class="lazy"   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 id="title">{{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連接埠即可

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

代理程式流程：發送請求?開啟代理?如果前端有資源那麼拿來就用，如果沒有去請求資源

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

  devServer: {
    proxy: {
      '/shanyu': {// 匹配所有以'shanyu'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        pathRewrite: {
            '^/shanyu': '' // 将所有的前缀替换为空串再去服务器内擦护照该路径
             // ws和changeOrigin默认都为true
            // ws: true, // 用于支持websocket
               // changeOrigin: true // 用于控制请求头host的值
        },
          //changeOrigin设置为true时，服务器收到的请求头中的host为: localhost: 5000
        //changeOrigin设置为false时，服务器收到的请求头中的host为: localhost :8080
      }

changeOrigin一般都設定為false，因為伺服器無論是否設定了某些不能請求其他連接埠的請求時，changeOrigin它也可以將自己變成所請求資源的伺服器的相同用埠（簡單來說就是，changeOrigin設定為false時，向哪台伺服器發起請求，呈現的就是那台伺服器的連接埠號碼）

（學習視頻分享：

vuejs入門教學、程式設計基礎影片）

以上是淺析Vue中插槽和配置代理的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！