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">&lt;返回</div>
      <div slot="fhz">關於</div>
    </Head>
    <ul>
      <li v-for="(v, i) of num" :key="i">
        {{ i + 1 }}&emsp;&emsp;&emsp;<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使用具名插槽