vue移動端專案頂部動態變化插槽的應用
- 1效果圖加前引
- 2創建匿名插槽
- 2使用匿名插槽
- 4創建具名插槽
- 5使用具名插槽
1效果圖加前引
一般我們寫移動端專案時會遇到這種需求，當點擊底部的關于頁面，頂部的位置也要顯示與之對應，今天為大家介紹一種簡單的方法!
使用插槽分兩種
1只需要改動一個值只需要用到匿名插槽
2組要改動多處最好用到具名插槽
2創建匿名插槽
創建一個頭部組件Head.vue，暫與About同級目錄，圖片右側為插槽部分，右側使用插槽的位置
2使用匿名插槽
操作About頁面
1匯入
import Head from "./Head";
參考
components: {
Head,
},
使用
<Head>關于</Head>
<!-- About -->
<template>
<div class="about">
<!-- <Head>關于</Head> -->
<Head>
<div @click="fn" slot="fhs"><回傳</div>
<div slot="fhz">關于</div>
</Head>
<ul>
<li v-for="(v, i) of num" :key="i">
{{ i + 1 }}   <span>This is an about page</span>
</li>
</ul>
</div>
</template>
<script>
import Head from "./Head";
export default {
//import引入的組件需要注入到物件中才能使用
components: {
Head,
},
data() {
//這里存放資料
return {
num: 50,
};
},
//監聽屬性 類似于data概念
computed: {},
//監控data中的資料變化
watch: {},
//方法集合
methods: {
fn() {
this.$router.go(-1);//引數0重繪，1前進，-1后退
},
},
};
</script>
<style scoped>
span {
font-size: 0.5rem;
}
</style>
4創建具名插槽
操作Head.vue附帶樣式
<!-- head -->
<template>
<div>
<div class="head">
<div class="heada">
<slot name="fhs"></slot>
</div>
<div class="headb">
<slot name="fhz"></slot>
</div>
<div class="headc">
<slot name="fhx"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Head",
//import引入的組件需要注入到物件中才能使用
components: {},
data() {
//這里存放資料
return {};
},
};
</script>
<style >
.head {
height: 1.2rem;
line-height: 1.2rem;
width: 100%;
background-color: #26a2ff;
color: #fff;
text-align: center;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
}
.heada{
flex: 1;
text-align: left;
font-size: 0.5rem;
}
.headb{
flex: 1;
font-size: 0.5rem;
}
.headc{
flex: 1;
font-size: 0.5rem;
}
</style>
5使用具名插槽
操作About頁面
1匯入
import Head from "./Head";
參考
components: {
Head,
},
使用
<Head>
<div @click="fn" slot="fhs"><回傳</div>
<div slot="fhz">關于</div>
</Head>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/163551.html
標籤：其他
下一篇：Js創建物件的幾種方法