Alert提示框的vue組件編寫

最近一直學習vue，跟着視頻敲代碼，敲了兩三個組件后，終於對編寫組件有一個大致的思路了，以下通過編寫一個alert提示框組件大致梳理一下我編寫組件的思路。

主要分為三個部分：組件引入(注冊路由器)、定義組件內容樣式及實現組件間通信。

 

(注冊路由器使用路由組件也可放到最后一步，個人習慣先引入然后定義組件及樣式便於觀察組件顯示效果)

下面是本組件引入后顯示效果，通過登匹配驗證為false觸發alert提示框顯示，點擊確認關閉提示框：

 

組件引入

一種是寫入路由，要先在在router.js中配置路由：

routes: [{path:'', component:''}]]

通過路由組件標簽  <router-link to="/" /> 注冊路由器;

 

另一種是通過import方式在父組件中引入，通過路由組件標簽  <router-view /> 注冊路由器，本文通過第二種方式注冊路由器：

import AlertTip from '@/components/AlertTip'

export default {
  components: {
    AlertTip // 忘記會報錯：'AlertTip' is defined but never used 
  }
}

 

定義組件內容及樣式

本文演示的alert提示框組件的定義內容如下：

<div id="dialog" class="dialog_container">
<!--提示框容器-->
    <section class="alert_container">
      <!--提示內容容器-->
      <div class="alert_content">
        <div class="tip_icon">
          <i class="el-icon-warning"></i>
          <span>提示信息</span>
        </div>
        <!--提示信息，接收父組件傳來的參數-->
        <p class="tip_text">{{alertText}}</p>
      </div>
      <!--確認事件傳遞回父組件-->
      <button class="confirm" @click="closeTip">確認</button>
    </section>
  </div>

 

提示框主要樣式——實現提示框位置及顯示，一般采用的樣式書寫方式如下：

.dialog_container {
  // 提示框位置及顯示一般樣式
  position: fixed;
  z-index: 9999; // 最上層
  left:50%;
  top:50%;
}

 

提示框內提示文本及按鈕樣式根據類標簽選擇器自行編寫。

 

組件間通信

引入組件並定義好組件內容樣式之后，要考慮的就是組件間通過參數傳遞進行通信。主要是父組件向子組件傳遞提示文本，子組件向父組件傳遞按鈕點擊事件狀態。本文所演示提示框組件主要是通過自定義事件進行父子組件間通信。

 

props: {
    alertText: String // 初始化顯示聲明類型
  },
  methods: {
    closeTip () {
      // 分發自定義事件（事件名:closeTip）
      this.$emit('closeTip')
    }
  }

 

在父組件中引入子組件時添加需要傳遞的參數及事件：

<AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"/>

 

在父組件中通過調用showAlert()方法傳入alertText參數值:

showAlert (alertText) {
  this.alertShow = true, // 是否顯示提示框組件
  this.alertText = alertText
}

 

至此，將代碼整合到一起，就得到一個可以動態顯示的提示框組件了。

目前還是前端小白一枚，所述不足之處還希望大家多多指正呀！