电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue基礎(chǔ)知識--axios合并請求和slot

瀏覽:3日期:2023-01-16 10:25:12

一、axios合并請求

export default { data(){ return {} }, created(){ function getMsg(res1,res2){ console.log(res1) console.log(res2) } this.$axios.all([this,axios.post(’URL’,’key=value’),this.axios.get(’URL’) ]) .then(this.$axios.spread(getMsg)) //分發(fā)響應(yīng) .catch(err => { console.log(err) }) }}

這樣可以實現(xiàn)發(fā)送兩個請求,只有所有都成功,才算是成功。只要有一個失敗,就算是失敗。

二、插槽slot

1.基本用法

插槽的出現(xiàn)使得我們可以在使用子組件時在子組件內(nèi)新增內(nèi)容,而不僅僅是簡單的使用,呈現(xiàn)出多樣化的子組件。

<navigation-link> Your Profile</navigation-link>

當我們使用子組件navigation時,在子組件中寫入一些內(nèi)容,但是如果我們子組件的template中沒有一個插槽slot,那么我們寫入的Your Profile沒有的地方放,子組件怎么知道要放在哪里呢,不知道放在哪里,所以它就干脆不放了,會把寫的內(nèi)容拋棄,大家就當無事發(fā)生過,子組件里怎么寫,它就怎么呈現(xiàn),全然不顧你在使用時寫入的東西,當做沒有看見。但是如果我們在子組件中寫入了一個插槽slot,那么我們傳入的內(nèi)容將會被在這個插槽處呈現(xiàn)。像下面這樣

<a v-bind:href='http://www.hdgsjgj.cn/bcjs/url' rel='external nofollow' rel='external nofollow' class='nav-link'> <slot></slot></a>

渲染出來的結(jié)果將是:

<a v-bind:href='http://www.hdgsjgj.cn/bcjs/url' rel='external nofollow' rel='external nofollow' class='nav-link'> Your Profile</a>

2.具名插槽

有時候,我們需要在子組件中放置多個內(nèi)容,那么你只有一個slot,它只能全部放在這里(其實我也不知道是不是這樣我沒有試過),如果你有多個slot,它怎么知道哪個內(nèi)容要放在哪個slot,按順序放嗎?不是的(其實我也不知道是不是)。正確的做法就是使用具名插槽。所謂具名插槽就是一個帶有name的slot。也就是下面這樣

<!--base-layout.vue--><div class='container'> <header> <slot name='header'></slot> </header> <main> <slot></slot> <!--默認插槽--> </main> <footer> <slot name='footer'></slot> </footer></div>

然后在使用上面這個子組件時像下面這樣

<base-layout> <template slot='header'> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot='footer'> <p>Here’s some contact info</p> </template></base-layout>

在使用時,通過一個具有slot屬性的標簽,屬性值對應(yīng)slot的name,將內(nèi)容放到子組件的相應(yīng)位置上去。

我們注意到,里面有一個沒有指定name的slot,它就是默認插槽。所有在使用子組件時傳入的東西,只要沒有指定slot=’slot的name’,就都會放在這里。

我們還注意到,這里用的一個叫做template的標簽,一定要用它嗎?不是的,也可以直接放在h1或者p上面,像下面這樣

<base-layout> <h1 slot='header'>Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot='footer'>Here’s some contact info</p></base-layout>

但是,如果你并不只有一個h1,你還有其他內(nèi)容也要一起放在這個插槽里,那你能怎么辦,為每一個要放在插槽里的標簽加slot嗎?太麻煩啦!所以就一起放在template里面,給template加slot咯。

3.插槽的默認內(nèi)容

有時候,我們也需要為某個插槽指定默認內(nèi)容。比如一個按鈕,默認顯示是 submit ,但我們有時在復(fù)用它的時候,我們又想改成別的,這個時候,就可以把這個按鈕的 submit 放在slot里面,然后在使用這個子組件的時候,放你要改的東西去改變它。如果沒有放,那就是默認的 submit。

<button type='submit'> <slot>Submit</slot> <!--Submit就是插槽的默認內(nèi)容--></button>

4.作用域

在插槽中傳值時,如果想要使用數(shù)據(jù),這個數(shù)據(jù)應(yīng)該是父組件的,而不能是子組件的。也就是說是使用子組件的那個組件的data。

<navigation-link url='/profile'> Logged in as {{ user.name }} </navigation-link>

這里的user不是navigation-link的,而是父組件的

牢記一條準則:父組件模板的所有東西都會在父級作用域內(nèi)編譯;子組件模板的所有東西都會在子級作用域內(nèi)編譯。

5.作用域插槽 【2.1.0+ 新增】(我也不知道為什么要叫這個名字,和插槽的作用于太像,很容易搞混?。?/p>

上面我們提到,插槽是具有作用于的,且當我們在使用子組件時,是無法獲取子組件的數(shù)據(jù)的。而有時,我們又需要獲取它,那么應(yīng)該怎么辦呢?

比如一個名為todo-list的子組件,它的內(nèi)容如下:

<ul> <li v-for='todo in todos' v-bind:key='todo.id'> {{ todo.text }} </li></ul>

這時,這里所獲取的數(shù)據(jù)是子組件自己內(nèi)部的數(shù)據(jù)。而我們在使用這個子組件時是無法獲取它的(當然我們可以用以前學(xué)習(xí)過的父子組件間的通訊來實現(xiàn)),我們可以利用slot來達到這個目的

<ul> <li v-for='todo in todos' v-bind:key='todo.id' > <!-- 我們?yōu)槊總€ todo 準備了一個插槽,--> <!-- 將 `todo` 對象作為一個插槽的 prop 傳入。--> <slot v-bind:todo='todo'> <!-- 回退的內(nèi)容 --> {{ todo.text }} </slot> </li></ul>

然后當我們使用todo-list組件的是時候,可以這樣做

<todo-list v-bind:todos='todos'> <!-- 將 `slotProps` 定義為插槽作用域的名字 --> <template slot-scope='slotProps'> <!-- 為待辦項自定義一個模板,--> <!-- 通過 `slotProps` 定制每個待辦項。--> <span v-if='slotProps.todo.isComplete'>✓</span> {{ slotProps.todo.text }} </template></todo-list>

這時即使我們是在父組件中,也還是可以獲取到子組件的數(shù)據(jù)。其中slotProps只是一個名字,我們用slot-scope指定為什么名字,就可以在下面用xx.來獲取子組件的data在 2.5.0+,slot-scope 不再限制在 <template> 元素上使用,而可以用在插槽內(nèi)的任何元素或組件上。

以上就是詳解vue中的axios和slot的詳細內(nèi)容,更多關(guān)于vue axios和slot的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標簽: IOS
相關(guān)文章:
主站蜘蛛池模板: 进口试验机价格-进口生物材料试验机-西安卡夫曼测控技术有限公司 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 三价铬_环保铬_环保电镀_东莞共盈新材料贸易有限公司 | 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 深圳市八百通智能技术有限公司官方网站 | 断桥铝破碎机_铝合金破碎机_废铁金属破碎机-河南鑫世昌机械制造有限公司 | 智能终端_RTU_dcm_北斗星空自动化科技 | 烽火安全网_加密软件、神盾软件官网 | 萃取箱-萃取槽-PVC萃取箱厂家-混合澄清槽- 杭州南方化工设备 | 厦门ISO认证|厦门ISO9001认证|厦门ISO14001认证|厦门ISO45001认证-艾索咨询专注ISO认证行业 | 塑料薄膜_PP薄膜_聚乙烯薄膜-常州市鑫美新材料包装厂 | 办公室装修_上海办公室设计装修_时尚办公新主张-后街印象 | 快速卷帘门_硬质快速卷帘门-西朗门业 | 油罐车_加油机_加油卷盘_加油机卷盘_罐车人孔盖_各类球阀_海底阀等车用配件厂家-湖北华特专用设备有限公司 | 土壤养分检测仪_肥料养分检测仪_土壤水分检测仪-山东莱恩德仪器 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 无缝钢管-聊城无缝钢管-小口径无缝钢管-大口径无缝钢管 - 聊城宽达钢管有限公司 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | 河南中整光饰机械有限公司-抛光机,去毛刺抛光机,精密镜面抛光机,全自动抛光机械设备 | 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 东莞市天进机械有限公司-钉箱机-粘箱机-糊箱机-打钉机认准东莞天进机械-厂家直供更放心! | b2b网站大全,b2b网站排名,找b2b网站就上地球网 | 包头市鑫枫装饰有限公司| 湖南自考_湖南自学考试网 | 冷凝水循环试验箱-冷凝水试验箱-可编程高低温试验箱厂家-上海巨为(www.juweigroup.com) | 新疆散热器,新疆暖气片,新疆电锅炉,光耀暖通公司 | 喷砂机厂家_自动喷砂机生产_新瑞自动化喷砂除锈设备 | 铝合金线槽_铝型材加工_空调挡水板厂家-江阴炜福金属制品有限公司 | 福兰德PVC地板|PVC塑胶地板|PVC运动地板|PVC商用地板-中国弹性地板系统专业解决方案领先供应商! 福建成考网-福建成人高考网 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 无刷电机_直流无刷电机_行星减速机-佛山市藤尺机电设备有限公司 无菌检查集菌仪,微生物限度仪器-苏州长留仪器百科 | 防爆电机-高压防爆电机-ybx4电动机厂家-河南省南洋防爆电机有限公司 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 医学动画公司-制作3d医学动画视频-医疗医学演示动画制作-医学三维动画制作公司 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 广州办公室设计,办公室装修,写字楼设计,办公室装修公司_德科 |