如何正確快速使用Vue中的插槽和設定代理程式？以下這篇文章跟大家介紹Vue中插槽和配置代理程式的使用方法，希望對大家有幫助！
1.什麼是插槽
讓父元件可以向子元件指定位置插入html結構,也是一種元件間通訊的方式,適用於父元件－>子元件。插槽分為三種，分別是預設插槽、具名插槽、作用域插槽，以下分別列出如何使用這三種插槽
啥是預設插槽呢？其實預設插槽相當於你買了一新房子，然後各個房間都已經裝飾好了，但是你還有一間屋子還沒裝修，因為你暫時不知道裡面要裝一套電競設備還是弄一書櫃，所以先在那屋留好地方，這時候你來到了商場，看到一心儀的書櫃，然後就跟銷售人員說，這個我買了，之後就把這個書櫃放到了那個空出來的屋子裡，插槽也是如此，子元件好比空屋子，父元件好比心儀書櫃（記住<子元件內定義插槽，父元件內寫好資料##>即可）【相關推薦：vuejs影片教學、web前端開發】
子元件內定義一個插槽
<template>
<div class="category">
<h3>{{title}}</h3>
<!-- 定义一个插槽（等待组件的使用者进行填充） -->
<slot>我是默认插槽，在没有传结构式我才会显示该片段文字</slot>
</div>
</template>父元件內填資料
<Category title="美食">
<img slot src="./assets/logo.png" alt>
</Category>父元件使用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>{{title}}</h3>
<!-- 具名插槽 -->
<slot name = "center">我是具名插槽center</slot>
<slot name = "footer">我是具名插槽footer</slot>
<img src="" alt="">
</div>
</template>理解:資料在組件的自身，但根據資料產生的結構需要組件的使用者來決定。 (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>{{title}}</h3>
<slot :games="games">我是作用域插槽，在没有传结构式我才会显示该片段文字</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data() {
return {
games: ["红警", "绿警", "蓝警", "紫警"]
};
}
};
</script> devServer:{
proxy: "http://localhost:5000"
}注意:
優點:配置簡單直接發送請求給8080連接埠即可缺點:不能配置多個代理且不靈活（若自己有資源，但是需要請求非前端資源，只能走自己已有的資源）代理程式流程：發送請求?開啟代理?如果前端有資源那麼拿來就用，如果沒有去請求資源
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
}以上是淺析Vue中插槽和配置代理的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
