vue中的ajax

vue腳手架配置代理

方法一

? 在vue.config.js中添加如下配置：

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

說明：

優點：配置簡單，請求資源時直接發給前端（8080）即可，
缺點：不能配置多個代理，不能靈活的控制請求是否走代理，
作業方式：若按照上述配置代理，當請求了前端不存在的資源時，那么該請求會轉發給服務器（優先匹配前端資源）

方法二

? 撰寫vue.config.js配置具體代理規則：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開頭的請求路徑
        target: 'http://localhost:5000',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'開頭的請求路徑
        target: 'http://localhost:5001',// 代理目標的基礎路徑
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設定為true時，服務器收到的請求頭中的host為：localhost:5000
   changeOrigin設定為false時，服務器收到的請求頭中的host為：localhost:8080
   changeOrigin默認值為true
*/

說明：

優點：可以配置多個代理，且可以靈活的控制請求是否走代理，
缺點：配置略微繁瑣，請求資源時必須加前綴，

插槽

作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用于 父組件 ===> 子組件 ，
分類：默認插槽、具名插槽、作用域插槽

使用方式：

默認插槽：

父組件中：
        <Category>
           <div>html結構1</div>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認內容...</slot>
            </div>
        </template>

具名插槽：

父組件中：
        <Category>
            <template slot="center">
              <div>html結構1</div>
            </template>

            <template v-slot:footer>
               <div>html結構2</div>
            </template>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認內容...</slot>
               <slot name="footer">插槽默認內容...</slot>
            </div>
        </template>

作用域插槽：

理解：資料在組件的自身，但根據資料生成的結構需要組件的使用者來決定，（games資料在Category組件中，但使用資料所遍歷出來的結構由App組件決定）

具體編碼：

父組件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul串列 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4標題 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子組件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //資料在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534193.html

標籤：其他

上一篇：electron vue3 專案搭建

下一篇：瀑布流使用虛擬串列性能優化