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

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

      <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>

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

    <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">我是作用域插槽，在沒(méi)有傳結(jié)構(gòu)式我才會(huì)顯示該片段文字</slot>
  </div>
</template>
<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["紅警", "綠警", "藍(lán)警", "紫警"]
    };
  }
};
</script>

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

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