首頁 web前端 js教程 關於Vue元件實現tips的總結

關於Vue元件實現tips的總結

Dec 28, 2017 pm 01:46 PM
實現 總結

本文主要介紹了詳解Vue組件實現tips的總結,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

元件,顧名思義,就是把一個相對獨立,而且會多次使用的功能抽像出來,成為一個元件!如果我們要把某個功能抽象成一個元件時,要做到這個元件對其他人來說是個黑盒子,他們不用關心裡面是怎麼實現的,只需要根據約定的介面呼叫即可!

我用一張圖稍微總結了下Vue中元件的組成:

#可以看到元件中包含的東西還是蠻多的,而且,還有很多的點沒有列出來,這裡面的每一個知識點能都展開講很多。不過我們這裡不講原理,只講使用。

我們以一個tips彈跳窗為例,來綜合運用下組件的知識點。 tips彈窗,幾乎所有的框架或類別庫,都會有彈跳窗這個元件,因為彈跳窗這個功能平時非常普遍,而且模組解耦度高!

1. 介面約定

我們這裡實作的彈窗,能用到的知識點有:props, event, slot, ref等。這裡我們也能看到各個知識點是怎麼運用的。


/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showbtn 是否显示按钮
 * @param {string} modal.btnText 按钮文字
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '提示',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '确定'
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})
登入後複製

2. modal元件的實作

tips元件相對來說實作的比較簡單,僅用作提示使用者的簡單彈層。

範本:


<p class="tips" v-show="show" transition="fade">
  <p class="tips-close" @click="closeTips">x</p>
  <p class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </p>
  <p class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </p>
  <p class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </p>
</p>
登入後複製

範本中將結構分成了三個部分,標題、內容和操作區域。這裡既可以使用props傳遞字串,也可以使用slot進行客製化。

tips樣式:


.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}
登入後複製

元件內的方法:


methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit(&#39;yes&#39;, {name:&#39;wenzi&#39;, age:36}); // 触发yes事件
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}
登入後複製

3 . 呼叫tips元件

首先我們開始渲染元件:


#
<p class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">显示</a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">提示标题</h3>
    <p slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </p>
  </tips>
</p>
登入後複製

點擊顯示按鈕後展示tips:




##

var app = new Vue({
  el : &#39;.app&#39;,

  data : {
    tipsOptions : {
      title : &#39;tip&#39;
    }
  }

  methods:{
    // 监听从组件内传递出来的事件
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    // 显示tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})
登入後複製

4. 總結


#在這個簡單的tips元件裡,我們實作了用props傳遞參數,用$emit向外傳遞參數,用slot插槽來客製化內容。


要注意的是:元件props是單向綁定,也就是父元件的屬性發生變化時,子元件能接收到對應的資料變化,但反過來就會出錯。即不能在子元件中修改props傳過來的數據,來達到修改父元件屬性的目的。這是為了防止子元件無意修改了父元件的狀態。

另外,每次父元件更新時,子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop。如果你這麼做了,Vue 會在控制台給予警告。如果真的需要在子元件裡進行修改,可以用這兩種方法來應對:

定義一個局部變量,並用prop 的值初始化它:

##

props: [&#39;initialCounter&#39;],
data: function () {
 return { counter: this.initialCounter }
}
登入後複製

定義一個計算屬性,處理prop 的值並回傳。

props: [&#39;size&#39;],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}
登入後複製

當然,這只是單一頁面中元件的實現,更複雜的元件後續我們也會實現。

相關建議:############PHP開發中的tips總結############css相關tips##### #######python tips######

以上是關於Vue元件實現tips的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
華為手機如何實現雙微信登入? 華為手機如何實現雙微信登入? Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入?隨著社群媒體的興起,微信已成為人們日常生活中不可或缺的溝通工具之一。然而,許多人可能會遇到一個問題:在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說,實現雙微信登入並不困難,本文將介紹華為手機如何實現雙微信登入的方法。首先,華為手機自帶的EMUI系統提供了一個很方便的功能-應用程式雙開。透過應用程式雙開功能,用戶可以在手機上同

使用Java編寫程式碼實作愛心動畫 使用Java編寫程式碼實作愛心動畫 Dec 23, 2023 pm 12:09 PM

透過Java程式碼實現愛心動畫效果在程式設計領域中,動畫效果是非常常見且受歡迎的。可以透過Java程式碼實現各種各樣的動畫效果,其中之一就是愛心動畫效果。本文將介紹如何使用Java程式碼來實現此效果,並給出具體的程式碼範例。實現愛心動畫效果的關鍵在於繪製心形圖案,並透過改變心形的位置和顏色來實現動畫效果。下面是一個簡單範例的程式碼:importjavax.swing.

總結Linux系統中system()函數的用法 總結Linux系統中system()函數的用法 Feb 23, 2024 pm 06:45 PM

Linux下system()函數的總結在Linux系統中,system()函數是一個非常常用的函數,它可以用來執行命令列指令。本文將對system()函數進行詳細的介紹,並提供一些特定的程式碼範例。一、system()函數的基本用法system()函數的聲明如下:intsystem(constchar*command);其中,command參數是一個字符

PHP程式設計指南:實作斐波那契數列的方法 PHP程式設計指南:實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具,能夠支援多種不同的程式設計邏輯和演算法。其中,實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中,將介紹如何使用PHP程式語言來實作斐波那契數列的方法,並附上具體的程式碼範例。斐波那契數列是一個數學上的序列,其定義如下:數列的第一個和第二個元素為1,從第三個元素開始,每個元素的值等於前兩個元素的和。數列的前幾元

開發建議:如何利用ThinkPHP框架實現非同步任務 開發建議:如何利用ThinkPHP框架實現非同步任務 Nov 22, 2023 pm 12:01 PM

《開發建議:如何利用ThinkPHP框架實現非同步任務》隨著網路技術的快速發展,Web應用程式對於處理大量並發請求和複雜業務邏輯的需求也越來越高。為了提高系統的效能和使用者體驗,開發人員常常會考慮利用非同步任務來執行一些耗時操作,例如發送郵件、處理文件上傳、產生報表等。在PHP領域,ThinkPHP框架作為一個流行的開發框架,提供了一些便捷的方式來實現非同步任務。

如何在華為手機上實現微信分身功能 如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視,微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號,方便管理和使用。在華為手機上實現微信分身功能並不困難,只需要按照以下步驟操作即可。第一步:確保手機系統版本和微信版本符合要求首先,確保你的華為手機系統版本已更新至最新版本,以及微信App

掌握Golang如何實現遊戲開發的可能性 掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中,Golang(Go語言)作為一種高效、簡潔、並發性強的程式語言,越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發,並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言,Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展,網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲,而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求,並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中,遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性,例如姓名、等級、經驗值等,並提供方法來操作這些

See all articles