需求:做一個公用的header子元件,左側為返回中間為titile右側為拍照,裡面的條件為有的頁面會有這個功能有的頁面沒有;所以我們會用false,和true來做定義

效果圖:

建立一個header,vue做為子元件

<template>
  <header class="header">
    <!-- 左側 -->
    <div class="header-button is-left" v-show="isLeft">
      <i class="fa fa-chevron-left"></i>
      <button @click="$router.push('/moments')">返回</button>
    </div>
    <!-- 中間的titile -->
    <h1 class="header-title">{{title}}</h1>
    <!-- 右側 -->
    <div class="header-button is-right" v-show="btn_icon">
      <button @click="$emit('rightClick')">
           <!--如果傳了btn_icon就給他顯示-->
        <i :class="'fa fa-'+btn_icon"></i>
      </button>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: String,
    isLeft: {
      type: Boolean,
      default: false
    },
    btn_icon: String
  }
};
</script>
 

父元件呼叫:

<template>
  <div>
    <Header title="微信" btn_icon="plus"/>
  </div>
</template>
<script>
import Header from '../components/Header';
export default {
  name: 'tabbar',
  components: {
    Header
  }
};
</script>